CSSKeyframesRule: cssRules 屬性

Baseline 已廣泛支援

此功能已相當成熟,可在多種裝置和瀏覽器版本上執行。自 ⁨2016 年 8 月⁩ 起,所有瀏覽器均已提供此功能。

CSSKeyframesRule 介面的只讀 cssRules 屬性返回一個 CSSRuleList,其中包含 at-rule 關鍵幀中的規則。

注意: CSSKeyframeRule 本身可以像陣列一樣被索引,並且其功能與其 cssRules 屬性類似。

一個 CSSRuleList

示例

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

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

  to {
    transform: translateX(100%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes.cssRules); // a CSSRuleList object with two rules

規範

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

瀏覽器相容性