W3cubDocs

/Web APIs

CSSKeyframesRule

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨August 2016⁩.

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

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.

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

  to {
    transform: translateX(100%);
  }
}

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.

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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`CSSKeyframesRule`	311–31	12	485–48	1815–1812.1–1512–12.1	9.14–9.1	3118–31	485–48	1814–1812.1–1412–12.1	9.33.2–9.3	2.01.0–2.0	4.4.31–4.4.3	9.33.2–9.3
`appendRule`	411–45	12	215–21	2815–3112–15	9.14	4118–45	215–21	2814–3212–14	9.33.2	4.01.0–5.0	414.4–45	9.33.2
`cssRules`	1	12	5	12	4	18	5	12	3.2	1.0	4.4	3.2
`deleteRule`	1	12	5	12	4	18	5	12	3.2	1.0	4.4	3.2
`findRule`	1	12	5	12	4	18	5	12	3.2	1.0	4.4	3.2
`length`	123	123	109	109	17	123	109	82	17	27.0	123	17
`name`	1	12	5	12	4	18	5	12	3.2	1.0	4.4	3.2