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.

Die CSSKeyframeRule Schnittstelle beschreibt ein Objekt, das eine Reihe von Stilen für ein bestimmtes Keyframe darstellt. Sie entspricht dem Inhalt eines einzelnen Keyframes einer @keyframes At-Regel.

Instanz-Eigenschaften

Erbt Eigenschaften von ihrem Vorfahren CSSRule.

CSSKeyframeRule.keyText: Repräsentiert den Schlüssel des Keyframes, wie zum Beispiel '10%', '75%'. Das Schlüsselwort from entspricht '0%' und das Schlüsselwort to entspricht '100%'.
CSSKeyframeRule.style Nur lesbar: Gibt eine CSSStyleDeclaration des mit dem Keyframe verbundenen CSS-Stils zurück.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von ihrem Vorfahren CSSRule.

Beispiele

Das CSS enthält eine @keyframes-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 jedes Keyframe enthält.

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