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.