CSSKeyframeRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨August 2016⁩.

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden