CSSKeyframesRule: phương thức appendRule()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.

Phương thức appendRule() của giao diện CSSKeyframeRule thêm một CSSKeyFrameRule vào cuối các quy tắc.

Cú pháp

appendRule(rule)

Tham số

rule: Một chuỗi chứa một quy tắc keyframe.

CSS bao gồm một keyframes at-rule. Đây sẽ là CSSRule đầu tiên được trả về bởi document.styleSheets[0].cssRules. myRules[0] trả về một đối tượng CSSKeyframesRule. Trả về thuộc tính cssRules sẽ trả về một CSSRuleList chứa một quy tắc.

Sau khi thêm một quy tắc khác với appendRule, thuộc tính cssRules trả về một CSSRuleList chứa hai quy tắc.

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