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, aDOMException
with aSYNTAX_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 between0
and1
. 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 number between0
and1
. If no such keyframe exists,findRule
returnsnull
.
Specification
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'CSSKeyframesRule' in that specification. |
Working Draft | Initial definition |
Browser compatibility
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()
.