This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.
The read-only CSSKeyframeRule.style property is the CSSStyleDeclaration interface for the declaration block of the CSSKeyframeRule.
A CSSStyleDeclaration object, with the following properties:
Unset.
The declared declarations in the rule, in the order they were specified, shorthand properties expanded to longhands.
The context object, which is an alias for this.
Null.
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.
@keyframes slide-in {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
let myRules = document.styleSheets[0].cssRules; let keyframes = myRules[0]; // a CSSKeyframesRule console.log(keyframes[0].style); // a CSSStyleDeclaration
| Specification |
|---|
| CSS Animations Level 1> # dom-csskeyframerule-style> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
style |
1 | 12 | 5 | 12 | 4 | 18 | 5 | 12 | 3.2 | 1.0 | 4.4 | 3.2 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframeRule/style