CSSKeyframesRule

Das CSSKeyframesRule-Interface beschreibt ein Objekt, das eine vollständige Reihe von Keyframes für eine CSS-Animation darstellt. Es entspricht dem Inhalt einer gesamten @keyframes At-Regel.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSKeyframesRule.name

Repräsentiert den Namen der Keyframes, der durch die 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 eine neue Keyframe-Regel in die aktuelle CSSKeyframesRule ein. Der Parameter ist ein String, der ein Keyframe im gleichen Format wie ein Eintrag in einer @keyframes-At-Regel enthält. Wenn der String 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 als Zahl zwischen 0% und 100% aufgelöst wird.

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, der als Prozentsatz zwischen 0% und 100% aufgelöst wird. Wenn kein solcher Keyframe existiert, gibt findRule null zurück.

Beispiel

Nutzung 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 ähnlich 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