CSSKeyframesRule: length-Eigenschaft

Die schreibgeschützte length-Eigenschaft der CSSKeyframeRule-Schnittstelle gibt die Anzahl der CSSKeyframeRule-Objekte in ihrer Liste zurück. Sie können dann auf jede Keyframe-Regel direkt über ihren Index auf dem CSSKeyframeRule-Objekt zugreifen.

Wert

Eine nicht-negative ganze Zahl. Sie sollte denselben Wert wie die length der cssRules-Eigenschaft haben.

Beispiele

Das CSS enthält eine keyframes-at-Regel. Dies wird die erste von document.styleSheets[0].cssRules zurückgegebene CSSRule sein. myRules[0] gibt ein CSSKeyframesRule-Objekt zurück. Die cssRules-Eigenschaft gibt eine CSSRuleList zurück, die zwei Regeln enthält.

css

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes.length); // 2

Spezifikationen

Specification
CSS Animations Level 1 # dom-csskeyframesrule-length

Browser-Kompatibilität

BCD tables only load in the browser