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