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 contents 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%
and100%
. 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 between0%
and100%
. 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSKeyframesRule | Chrome Full support Yes | Edge Full support 12 | Firefox
Full support
48
| IE Full support 10 | Opera
Full support
12
| Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android
Full support
48
| Opera Android
Full support
12
| Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
appendRule | Chrome
Full support
Yes
| Edge Full support 12 | Firefox
Full support
22
| IE
Full support
10
| Opera
Full support
Yes
| Safari
Full support
Yes
| WebView Android
Full support
Yes
| Chrome Android
Full support
Yes
| Firefox Android
Full support
22
| Opera Android
Full support
Yes
| Safari iOS
Full support
Yes
| Samsung Internet Android
Full support
Yes
|
cssRules | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
deleteRule | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
findRule | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
name | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.