CSSKeyframesRule
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年8月.
* Some parts of this feature may have varying levels of support.
CSSKeyframesRule 接口表示 CSS 动画的完整关键帧集合的对象。它对应于整个 @keyframes at 规则的内容。
实例属性
继承其祖先 CSSRule 的属性。
CSSKeyframesRule.name-
表示关键帧的名称，被用于
animation-name属性。 CSSKeyframesRule.cssRules只读-
返回关键帧列表
CSSRuleList。 CSSKeyframesRule.length只读-
返回列表中关键帧的数量。
实例方法
继承其祖先 CSSRule 的方法。
CSSKeyframesRule.appendRule()-
将新的关键帧规则插入到当前 CSSKeyframesRule 中。参数是一个字符串，包含与
@keyframesat 规则条目格式相同的关键帧。如果包含多个关键帧规则，则会抛出带有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% 规范
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframesrule |