CSSKeyframesRule
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.
* Some parts of this feature may have varying levels of support.
Das CSSKeyframesRule-Interface beschreibt ein Objekt, das eine komplette Reihe von Keyframes für eine CSS-Animation repräsentiert. Es entspricht dem Inhalt einer ganzen @keyframes At-Regel.
Instanz-Eigenschaften
Erbt Eigenschaften von seinem Vorfahren CSSRule.
CSSKeyframesRule.name-
Stellt den Namen der Keyframes dar, der von der Eigenschaft
animation-nameverwendet wird. CSSKeyframesRule.cssRulesSchreibgeschützt-
Gibt eine
CSSRuleListder Keyframes in der Liste zurück. CSSKeyframesRule.lengthSchreibgeschü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 das aktuelle CSSKeyframesRule ein. Der Parameter ist ein String, der ein Keyframe im gleichen Format wie ein Eintrag einer
@keyframes-At-Regel enthält. Wenn es mehr als eine Keyframe-Regel enthält, wird einDOMExceptionmit einemSYNTAX_ERRausgelö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 String, der als Zahl zwischen
0%und100%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 und als Prozentsatz zwischen
0%und100%aufgelöst wird. Wenn ein solches Keyframe nicht existiert, gibtfindRulenullzurü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
Zugriff 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
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframesrule |
Browser-Kompatibilität
Loading…