CSSKeyframesRule: cssRules-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

Die schreibgeschützte cssRules-Eigenschaft des CSSKeyframeRule-Interfaces gibt eine CSSRuleList zurück, die die Regeln der Keyframes-At-Regel enthält.

Hinweis: Die CSSKeyframeRule selbst ist wie ein Array indexierbar und funktioniert ähnlich wie ihre cssRules-Eigenschaft.

Wert

Beispiele

Das CSS enthält eine Keyframes-At-Regel. Diese wird die erste %CODE_BLOCK sein, die von document.styleSheets[0].cssRules zurückgegeben wird. 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%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes.cssRules); // a CSSRuleList object with two rules

Spezifikationen

Specification
CSS Animations Level 1
# dom-csskeyframesrule-cssrules

Browser-Kompatibilität