CSSKeyframesRule

Die CSSKeyframesRule-Schnittstelle beschreibt ein Objekt, das eine vollständige Gruppe von Keyframes für eine CSS-Animation darstellt. Sie entspricht dem Inhalt eines gesamten @keyframes At-Regel.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSKeyframesRule.name

Repräsentiert den Namen der Keyframes, der von der animation-name-Eigenschaft verwendet wird.

CSSKeyframesRule.cssRules Schreibgeschützt

Gibt eine CSSRuleList der Keyframes in der Liste zurück.

CSSKeyframesRule.length Schreibgeschützt

Gibt die Anzahl der Keyframes in der Liste zurück.

Instanz-Methoden

Erbt Methoden von seinem Vorfahren CSSRule.

CSSKeyframesRule.appendRule()

Fügt der aktuellen CSSKeyframesRule eine neue Keyframe-Regel hinzu. Der Parameter ist ein String, der ein Keyframe im gleichen Format wie ein Eintrag einer @keyframes-At-Regel enthält. Wenn er mehr als eine Keyframe-Regel enthält, wird eine DOMException mit einem SYNTAX_ERR ausgelöst.

CSSKeyframesRule.deleteRule()

Löscht eine Keyframe-Regel aus der aktuellen CSSKeyframesRule. Der Parameter ist der Index des zu löschenden Keyframes, ausgedrückt als ein String, der sich als Zahl zwischen 0% und 100% auflöst.

CSSKeyframesRule.findRule()

Gibt eine Keyframe-Regel zurück, die dem angegebenen Schlüssel entspricht. Der Schlüssel ist ein String, der einen Index des zurückzugebenden Keyframes enthält, aufgelöst zu einem Prozentsatz zwischen 0% und 100%. Wenn kein solches Keyframe existiert, gibt findRule null zurück.

Beispiel

Verwendung von CSSKeyframesRule

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.

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

const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule

Zugreifen auf Indizes

CSSKeyframesRule kann wie ein Array indiziert werden und funktioniert ähnlich wie seine cssRules-Eigenschaft.

const keyframes = document.styleSheets[0].cssRules[0];
for (let i = 0; i < keyframes.length; i++) {
 console.log(keyframes[i].keyText);
}
// Output:
// 0%
// 100%

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @keyframes
• CSSKeyFrameRule