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