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。

示例

使用 CSSKeyframesRule

CSS 包含一个关键帧 at 规则。这将是 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]; // CSSKeyframesRule

访问索引

CSSKeyframesRule 可以像数组一样被索引，并且功能类似于其 cssRules 属性。

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

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

// 输出：
// 0%
// 100%

规范

浏览器兼容性

参见

• @keyframes
• CSSKeyFrameRule