# CSSKeyframesRule

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The `CSSKeyframesRule` interface describes an object representing a complete set of keyframes for a CSS animation. It corresponds to the contains of a whole `@keyframes` at-rule. It implements the `CSSRule` interface with a type value of `7` (`CSSRule.KEYFRAMES_RULE`).

## Properties

As a `CSSRule`, `CSSKeyframesRule` also implements the properties of these interfaces. It has two properties :

`CSSKeyframesRule.name`
Represents the name of the animation, used by the `animation-name` property.
`CSSKeyframesRule.cssRules` Read only
Returns a `CSSRuleList` of the CSS rules in the media rule.

## Methods

As a `CSSRule`, `CSSKeyframesRule` also implements the methods of that interface. It has three specific methods:

`CSSKeyframesRule.appendRule()`
Inserts a new keyframe rule into the current CSSKeyframesRule. The parameter is a `DOMString` containing a keyframe in the same format as an entry of a `@keyframes` at-rule. If it contains more than one keyframe rule, a `DOMException` with a `SYNTAX_ERR` is thrown.
`CSSKeyframesRule.deleteRule()`
Deletes a keyframe rule from the current CSSKeyframesRule. The parameter is the index of the keyframe to be deleted, expressed as a `DOMString` resolving as a number between `0%` and `100%`.
`CSSKeyframesRule.findRule()`
Returns a keyframe rule corresponding to the given key. The key is a `DOMString` containing an index of the keyframe to be returned, resolving to a percentage between `0%` and `100%`. If no such keyframe exists, `findRule` returns `null`.

## Specification

Specification Status Comment
CSS Animations
The definition of 'CSSKeyframesRule' in that specification.
Working Draft Initial definition

## Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes

48

5

10124
`appendRule`

Yes

Yes — 451

?

22

5 — 221

101 Yes1 Yes1
`cssRules` ? ? ? ? ? ?
`deleteRule` ? ? ? ? ? ?
`findRule` ? ? ? ? ? ?
`name` ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes

48

5

12 Yes ?
`appendRule`

Yes

Yes — 451

Yes

Yes — 451

?

22

5 — 221

Yes1 Yes1 ?
`cssRules` ? ? ? ? ? ? ?
`deleteRule` ? ? ? ? ? ? ?
`findRule` ? ? ? ? ? ? ?
`name` ? ? ? ? ? ? ?

1. Supported as `insertRule`.