CSSKeyframeRule
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2016 browserübergreifend verfügbar.
Das CSSKeyframeRule Interface beschreibt ein Objekt, das einen Satz von Stilen für ein bestimmtes Keyframe repräsentiert. 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 Schlüsselwortfromwird auf'0%'abgebildet und das Schlüsselworttoauf'100%'. CSSKeyframeRule.styleSchreibgeschützt-
Gibt eine
CSSStyleDeclarationdes mit dem Keyframe verbundenen CSS-Stils 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 jedes Keyframe enthält.
@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
| Spezifikation |
|---|
| CSS Animations Level 1 # interface-csskeyframerule |