CSSKeyframeRule

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.

Das CSSKeyframeRule Interface beschreibt ein Objekt, das eine Gruppe von Styles für einen bestimmten Keyframe darstellt. Es entspricht dem Inhalt eines einzelnen Keyframes einer @keyframes-At-Regel.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSKeyframeRule.keyText: Repräsentiert den Schlüssel des Keyframes, wie '10%', '75%'. Das from-Schlüsselwort wird zu '0%' und das to-Schlüsselwort wird zu '100%' zugeordnet.
CSSKeyframeRule.style Schreibgeschützt: Gibt eine CSSStyleDeclaration der mit dem Keyframe verbundenen CSS-Stile zurück.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSRule.

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, das einzelne CSSKeyFrameRule-Objekte für jeden Keyframe enthalten wird.

css

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

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

let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.

Spezifikationen

Specification
CSS Animations Level 1 # interface-csskeyframerule

Browser-Kompatibilität

BCD tables only load in the browser