CSSKeyframesRule: length property
Baseline
2024
Newly 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-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 |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
length
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support