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 your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

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

Wert

Eine CSSRuleList.

Beispiele

Das CSS enthält eine Keyframes-At-Regel. Dies wird die erste CSSRule 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