CSSKeyframesRule: length プロパティ
Baseline
2024
Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
length は CSSKeyframesRule インターフェイスの読み取り専用プロパティで、リスト内の CSSKeyframeRule オブジェクトの数を返します。そのため、それぞれのキーフレームルールを CSSKeyframeRule オブジェクト上でインデックスによりアクセスすることができます。
値
非負の整数です。これは cssRules プロパティの length と同じ値になります。
例
この CSS には keyframes アットルールが含まれています。これは最初の CSSRule が document.styleSheets[0].cssRules で返されます。
myRules[0] は CSSKeyframesRule オブジェクトを返します。 cssRules プロパティは 2 つのルールを含む CSSRuleList を返します。
css
@keyframes slide-in {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
js
const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // CSSKeyframesRule
console.log(keyframes.length); // 2
仕様書
| Specification |
|---|
| CSS Animations Level 1> # dom-csskeyframesrule-length> |