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-nameproperty. CSSKeyframesRule.cssRulesRead only- Returns a
CSSRuleListof 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
DOMStringcontaining a keyframe in the same format as an entry of a@keyframesat-rule. If it contains more than one keyframe rule, aDOMExceptionwith aSYNTAX_ERRis 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
DOMStringresolving as a number between0and1. CSSKeyframesRule.findRule()- Returns a keyframe rule corresponding to the given key. The key is a
DOMStringcontaining an index of the keyframe to be returned, resolving to a number between0and1. If no such keyframe exists,findRulereturnsnull.
Specification
| Specification | Status | Comment |
|---|---|---|
| CSS Animations The definition of 'CSSKeyframesRule' in that specification. |
Working Draft | Initial definition |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 5.0 (5.0) -moz 48 (48) |
10 | 12 -o 12.10 |
4.0 |
appendRule |
(Yes)[1] | ? | 5.0 (5.0)[2] 22.0 (22.0) |
10[3] | (Yes)[3] | (Yes)[3] |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | (Yes) | 5.0 (5.0) -moz 48 (48) |
(Yes) | 12 -o 12.10 |
(Yes) | (Yes) |
appendRule |
? | (Yes)[1] | ? | 5.0 (5.0)[2] 22.0 (22.0) |
(Yes)[3] | (Yes)[3] | (Yes)[3] | (Yes)[1] |
[1] The non-standard name insertRule() was removed in Chrome 45.
[2] Gecko 5.0 implemented this with the non-standard name insertRule(). In Gecko 22.0 it was changed to the standard name appendRule.
[3] Internet Explorer 10, Safari and Opera implement this with the non-standard name insertRule().