CSSKeyframesRule

例項屬性

繼承自其祖先 CSSRule 的屬性。

CSSKeyframesRule.name

表示關鍵幀的名稱，用於 animation-name 屬性。

CSSKeyframesRule.cssRules 只讀

返回一個 CSSRuleList，其中包含列表中的關鍵幀。

CSSKeyframesRule.length 只讀

返回列表中關鍵幀的數量。

例項方法

繼承其祖先 CSSRule 的方法。

CSSKeyframesRule.appendRule()

將一個新的關鍵幀規則插入當前的 CSSKeyframesRule。引數是一個包含關鍵幀的字串，格式與 @keyframes at-rule 的條目相同。如果它包含多個關鍵幀規則，則會丟擲一個 SYNTAX_ERR 的 DOMException。

CSSKeyframesRule.deleteRule()

從當前的 CSSKeyframesRule 中刪除一個關鍵幀規則。引數是要刪除的關鍵幀的索引，表示為一個解析為 0% 到 100% 之間數字的字串。

CSSKeyframesRule.findRule()

返回與給定鍵對應的關鍵幀規則。鍵是一個包含要返回的關鍵幀索引的字串，解析為 0% 到 100% 之間的百分比。如果不存在這樣的關鍵幀，findRule 返回 null。

示例

使用 CSSKeyframesRule

CSS 包含一個關鍵幀 at-rule。這將是 document.styleSheets[0].cssRules 返回的第一個 CSSRule。myRules[0] 返回一個 CSSKeyframesRule 物件。

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

  to {
    transform: translateX(100%);
  }
}

const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule

訪問索引

CSSKeyframesRule 可以像陣列一樣被索引，其功能與其 cssRules 屬性類似。

const keyframes = document.styleSheets[0].cssRules[0];

for (let i = 0; i < keyframes.length; i++) {
  console.log(keyframes[i].keyText);
}

// Output:
// 0%
// 100%

規範

瀏覽器相容性

另見

• @keyframes
• CSSKeyFrameRule