CSSKeyframesRule

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.

* Some parts of this feature may have varying levels of support.

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.

CSSRule CSSKeyframesRule

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.

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

  to {
    transform: translateX(100%);
  }
}
js
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.

js
const keyframes = document.styleSheets[0].cssRules[0];

for (let i = 0; i < keyframes.length; i++) {
  console.log(keyframes[i].keyText);
}

// Output:
// 0%
// 100%

Spezifikationen

Specification
CSS Animations Level 1
# interface-csskeyframesrule

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSKeyframesRule
appendRule
cssRules
deleteRule
findRule
length
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch