CSSKeyframesRule: метод appendRule()

Метод appendRule() интерфейса CSSKeyframeRule добавляет правило ключевой анимации в конец списка правил.

rule

Строка, содержащая правило ключевой анимации.

None (undefined).

CSS содержит правило @keyframes. Это будет первое CSSRule, возвращенное document.styleSheets[0].cssRules. myRules[0] возвращает объект CSSKeyframesRule. Обращение к свойству cssRules вернет CSSRuleList содержащий одно правило.

После добавления ещё одного правила с помощью appendRule свойство cssRules возвращает CSSRuleList содержащий два правила.

@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