CSSKeyframesRule: length 屬性

Baseline 2024
新推出

自 ⁨2024 年 3 月⁩ 起,此功能可在最新的裝置和瀏覽器版本上執行。此功能可能不適用於較舊的裝置或瀏覽器。

CSSKeyframesRule 介面的只讀 length 屬性返回其列表中的 CSSKeyframeRule 物件的數量。然後,您可以透過索引直接在 CSSKeyframesRule 物件上訪問每個關鍵幀規則。

一個非負整數。它的值應與 cssRules 屬性的 length 相同。

示例

CSS 包含一個 keyframes at-rule。這將是 document.styleSheets[0].cssRules 返回的第一個 CSSRulemyRules[0] 返回一個 CSSKeyframesRule 物件。cssRules 屬性返回一個 CSSRuleList,其中包含兩個規則。

css
@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
js
const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes.length); // 2

規範

規範
CSS 動畫級別 1
# dom-csskeyframesrule-length

瀏覽器相容性