CSSKeyframesRule

从其祖先 CSSRule 继承属性。

CSSKeyframesRule.name

表示关键帧的名称，由 animation-name 属性使用。

CSSKeyframesRule.cssRules 只读

返回一个 CSSRuleList，其中包含列表中的关键帧。

CSSKeyframesRule.length 只读

返回列表中的关键帧数量。

从其祖先 CSSRule 继承方法。

CSSKeyframesRule.appendRule()

在当前 CSSKeyframesRule 中插入新的关键帧规则。参数是一个字符串，包含关键帧，格式与 @keyframes at-规则的条目相同。如果它包含多个关键帧规则，则会抛出一个带有 SYNTAX_ERR 的 DOMException。

CSSKeyframesRule.deleteRule()

从当前 CSSKeyframesRule 中删除关键帧规则。参数是要删除的关键帧的索引，表示为一个字符串，解析为 0% 到 100% 之间的数字。

CSSKeyframesRule.findRule()

返回与给定键对应的关键帧规则。键是一个字符串，包含要返回的关键帧的索引，解析为 0% 到 100% 之间的百分比。如果不存在这样的关键帧，findRule 返回 null。

CSS 包含关键帧 at-规则。这将是 document.styleSheets[0].cssRules 返回的第一个 CSSRule。myRules[0] 返回一个 CSSKeyframesRule 对象。

@keyframes slidein {
  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