CSSKeyframesRule

Интерфейс CSSKeyframesRule описывает объект, представляющий полный набор ключевых кадров для анимации CSS. Он соответствует содержимому целого @keyframes правила.

Наследует свойства от своего предка CSSRule.

CSSKeyframesRule.name

Представляет имя ключевых кадров, используемое свойством animation-name.

CSSKeyframesRule.cssRules Только для чтения

Возвращает CSSRuleList ключевых кадров в списке.

CSSKeyframesRule.length Только для чтения

Возвращает количество ключевых кадров в списке.

Наследует методы от своего предка CSSRule.

CSSKeyframesRule.appendRule()

Вставляет новое правило ключевых кадров в текущее CSSKeyframesRule. Параметр — строка, содержащая ключевой кадр в том же формате, что и запись в @keyframes правиле. Если она содержит более одного правила ключевых кадров, выбрасывается DOMException с SYNTAX_ERR.

CSSKeyframesRule.deleteRule()

Удаляет правило ключевых кадров из текущего CSSKeyframesRule. Параметр — индекс ключевого кадра, подлежащего удалению, выраженный в виде строки, разрешающейся как число между 0% и 100%.

CSSKeyframesRule.findRule()

Возвращает правило ключевого кадра, соответствующее заданному ключу. Ключ — строка, содержащая индекс ключевого кадра, подлежащего возвращению, разрешающаяся в процентное значение между 0% и 100%. Если такого ключевого кадра не существует, findRule возвращает null.

CSS включает правило ключевых кадров. Это будет первый CSSRule возвращаемый document.styleSheets[0].cssRules. myRules[0] возвращает объект CSSKeyframesRule.

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

  to {
    transform: translateX(100%);
  }
}

const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule

К CSSKeyframesRule можно получить доступ с помощью индексов, как к массиву, и это работает аналогично свойству cssRules.

const keyframes = document.styleSheets[0].cssRules[0];

for (let i = 0; i < keyframes.length; i++) {
  console.log(keyframes[i].keyText);
}

// Output:
// 0%
// 100%

• @keyframes
• CSSKeyFrameRule