CSSKeyframesRule: length property
Baseline 2024Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The read-onlylength property of theCSSKeyframeRule interface returns the number ofCSSKeyframeRule objects in its list. You can then access each keyframe rule by its index directly on theCSSKeyframeRule object.
In this article
Value
A non-negative integer. It should have the same value as thelength of thecssRules property.
Examples
The CSS includes a keyframes at-rule. This will be the firstCSSRule returned bydocument.styleSheets[0].cssRules.myRules[0] returns aCSSKeyframesRule object. ThecssRules property returns aCSSRuleList containing two rules.
css
@keyframes slide-in { from { transform: translateX(0%); } to { transform: translateX(100%); }}js
const myRules = document.styleSheets[0].cssRules;const keyframes = myRules[0]; // a CSSKeyframesRuleconsole.log(keyframes.length); // 2Specifications
| Specification |
|---|
| CSS Animations Level 1> # dom-csskeyframesrule-length> |