CSSKeyframeRule

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.

The CSSKeyframeRule interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a @keyframes at-rule.

CSSRule CSSKeyframeRule

Instance properties

Inherits properties from its ancestor CSSRule.

CSSKeyframeRule.keyText

Represents the key of the keyframe, like '10%', '75%'. The from keyword maps to '0%' and the to keyword maps to '100%'.

CSSKeyframeRule.style Read only

Returns a CSSStyleDeclaration of the CSS style associated with the keyframe.

Instance methods

No specific methods; inherits methods from its ancestor CSSRule.

Examples

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, which will contain individual CSSKeyFrameRule objects for each keyframe.

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

  to {
    transform: translateX(100%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.

Specifications

Specification
CSS Animations Level 1
# interface-csskeyframerule

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
CSSKeyframeRule
keyText
style

Legend

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

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also