CSSKeyframesRule

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

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.

CSSRule CSSKeyframesRule

Instance properties

Inherits properties from its ancestor CSSRule.

CSSKeyframesRule.name

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

CSSKeyframesRule.cssRules Read only

Returns a CSSRuleList of the keyframes in the list.

CSSKeyframesRule.length Read only

Returns the number of keyframes in the list.

Instance methods

Inherits methods from its ancestor CSSRule.

CSSKeyframesRule.appendRule()

Inserts a new keyframe rule into the current CSSKeyframesRule. The parameter is a string 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 string resolving as a number between 0% and 100%.

CSSKeyframesRule.findRule()

Returns a keyframe rule corresponding to the given key. The key is a string 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.

Example

Using CSSKeyframesRule

The CSS includes a keyframes at-rule. This will be the first CSSRule returned by document.styleSheets[0].cssRules. myRules[0] returns a CSSKeyframesRule object.

css
@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
js
const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule

Accessing indexes

CSSKeyframesRule can be indexed like an array, and functions similar to its cssRules property.

js
const keyframes = document.styleSheets[0].cssRules[0];

for (let i = 0; i < keyframes.length; i++) {
  console.log(keyframes[i].keyText);
}

// Output:
// 0%
// 100%

Specifications

Specification
CSS Animations Level 1
# interface-csskeyframesrule

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSKeyframesRule
appendRule
cssRules
deleteRule
findRule
length
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also