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.
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
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframerule |