CSSKeyframesRule: length プロパティ
Baseline
2024
最近利用可能
March 2024以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
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
仕様書
| 仕様書 |
|---|
| CSS Animations Level 1 # dom-csskeyframesrule-length |