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 上檢視此頁面 • 報告此內容的問題