CSSKeyframesRule：appendRule() 方法
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月.
CSSKeyframeRule 接口的 appendRule() 方法用于将一个 CSSKeyFrameRule 追加到规则列表的末尾。
语法
js
appendRule(rule)
参数
rule-
一个包含关键帧规则的字符串。
返回值
无（undefined）。
示例
以下 CSS 中包含一个关键帧 at 规则。这将是 document.styleSheets[0].cssRules 返回的第一个 CSSRule。myRules[0] 返回一个 CSSKeyframesRule 对象。其 cssRules 属性会返回一个包含一条规则的 CSSRuleList。
使用 appendRule 追加另一条规则后，cssRules 属性会返回一个包含两条规则的 CSSRuleList。
css
@keyframes slide-in {
from {
transform: translateX(0%);
}
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
keyframes.appendRule("to {transform: translateX(100%);}");
console.log(keyframes.cssRules); // 包含两条规则的 CSSRuleList
规范
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframesrule-appendrule |
浏览器兼容性
Loading…