CSSKeyframesRule

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 :

CSSPageRule.name

Represents the name of the animation, used by the animation-name property.

CSSPageRule.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:

CSSPageRule.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.

CSSPageRule.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 1.

CSSPageRule.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 between 0 and 1. If no such keyframe exists, findRule returns null.

Specification

Browser compatibility

[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().

See also

• @keyframes
• CSSKeyFrameRule