CSSKeyframeRule.style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年8月.
CSSKeyframeRule.style プロパティは CSSStyleDeclaration インターフェイスであり、 CSSKeyframeRule の宣言ブロックです。
値
CSSStyleDeclaration オブジェクトで、次のプロパティがあります。
- readonly flag
-
未設定。
- declarations
-
このルール内で宣言された宣言で、指定された順番であり、個別指定プロパティに展開された一括指定プロパティです。
- parent CSS rule
-
コンテキストオブジェクトで、 this の別名です。
- owner node
-
null です。
例
この CSS には keyframes アットルールが記載されています。これは最初の CSSRule であり、 document.styleSheets[0].cssRules で返されます。
myRules[0] は CSSKeyframesRule オブジェクトを返し、その中に各キーフレームに対応する個々の CSSKeyFrame オブジェクトが格納されます。
css
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0].style); // a CSSStyleDeclaration
仕様書
| Specification |
|---|
| CSS Animations Level 1 # dom-csskeyframerule-style |
ブラウザーの互換性
Loading…