CSSKeyframeRule

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

TheCSSKeyframeRule interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a@keyframesat-rule.

Instance properties

Inherits properties from its ancestorCSSRule.

CSSKeyframeRule.keyText: Represents the key of the keyframe, like'10%','75%'. Thefrom keyword maps to'0%' and theto keyword maps to'100%'.
CSSKeyframeRule.styleRead only: Returns aCSSStyleDeclaration of the CSS style associated with the keyframe.

Instance methods

No specific methods; inherits methods from its ancestorCSSRule.

The CSS includes a keyframes at-rule. This will be the firstCSSRule returned bydocument.styleSheets[0].cssRules.myRules[0] returns aCSSKeyframesRule object, which will contain individualCSSKeyFrameRule objects for each keyframe.

css

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

let myRules = document.styleSheets[0].cssRules;let keyframes = myRules[0]; // a CSSKeyframesRuleconsole.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.