CSSKeyframeRule
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.
Die CSSKeyframeRule-Schnittstelle beschreibt ein Objekt, das eine Menge von Stilen für ein bestimmtes Keyframe darstellt. Sie 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 zum Beispiel
'10%','75%'. Das Schlüsselwortfromwird mit'0%'und das Schlüsselworttomit'100%'abgebildet. CSSKeyframeRule.styleSchreibgeschützt-
Gibt eine
CSSStyleDeclarationder CSS-Stile zurück, die mit dem Keyframe verbunden sind.
Instanz-Methoden
Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSRule.
Beispiele
Das CSS umfasst 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, welches individuelle 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
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframerule |
Browser-Kompatibilität
Loading…