CSSKeyframesRule: length property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2024.
The read-only length property of the CSSKeyframesRule interface returns the number of CSSKeyframeRule objects in its list. You can then access each keyframe rule by its index directly on the CSSKeyframeRule object.
Value
A non-negative integer. It should have the same value as the length of the cssRules property.
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. The cssRules property returns a CSSRuleList 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 CSSKeyframesRule
console.log(keyframes.length); // 2
Specifications
| Specification |
|---|
| CSS Animations Level 1 # dom-csskeyframesrule-length |