CSSKeyframesRule: length property

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

BCD tables only load in the browser