CSSKeyframesRule: appendRule() 方法

Baseline 已广泛支持

此功能已相当成熟，可在多种设备和浏览器版本上运行。自 ⁨2016 年 8 月⁩ 起，所有浏览器均已提供此功能。

CSSKeyframeRule 接口的 appendRule() 方法将一个 CSSKeyFrameRule 添加到规则的末尾。

语法

appendRule(rule)

参数

rule: 包含关键帧规则的字符串。

返回值

无（undefined）。

示例

CSS 包含一个 keyframes at-rule。这将是 document.styleSheets[0].cssRules 返回的第一个 CSSRule。myRules[0] 返回一个 CSSKeyframesRule 对象。返回 cssRules 属性将返回一个包含一条规则的 CSSRuleList。

使用 appendRule 添加另一条规则后，cssRules 属性返回一个包含两条规则的 CSSRuleList。

css

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }
}

let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
keyframes.appendRule("to {transform: translateX(100%);}");
console.log(keyframes.cssRules); // a CSSRuleList object with two rules

规范

规范
CSS 动画级别 1 # interface-csskeyframesrule-appendrule

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2024年10月8日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题