KeyframeEffect

Интерфейс KeyframeEffect API веб-анимаций позволяет создавать наборы анимируемых свойств и значений, называемых ключевыми кадрами. Затем их можно воспроизвести, используя конструктор Animation().

KeyframeEffect()

Возвращает новый экземпляр объекта KeyframeEffect, а также позволяет клонировать существующий экземпляр объекта эффекта ключевых кадров.

KeyframeEffect.target

Получает и устанавливает элемент или исходный элемент псевдоэлемента, анимируемый этим объектом. Может быть null для анимаций, которые не нацелены на конкретный элемент или псевдоэлемент.

KeyframeEffect.pseudoElement

Получает и устанавливает селектор псевдоэлемента, анимируемого этим объектом. Может быть null для анимаций, которые не нацелены на псевдоэлемент.

KeyframeEffect.iterationComposite

Получает и устанавливает операцию комбинирования итераций для определения изменений значений свойств этого эффекта ключевых кадров.

KeyframeEffect.composite

Получает и устанавливает свойство операции комбинирования для определения изменений значений свойств между этим и другими эффектами ключевых кадров.

Этот интерфейс наследует некоторые методы от своего родителя, AnimationEffect.

AnimationEffect.getComputedTiming()

Возвращает рассчитанные текущие значения тайминга для этого эффекта ключевых кадров.

KeyframeEffect.getKeyframes()

Возвращает рассчитанные ключевые кадры, составляющие этот эффект, вместе с их рассчитанными смещениями ключевых кадров.

AnimationEffect.getTiming()

Возвращает объект, связанный с анимацией, содержащий все значения тайминга анимации.

KeyframeEffect.setKeyframes()

Заменяет набор ключевых кадров, составляющих этот эффект.

AnimationEffect.updateTiming()

Обновляет указанные свойства тайминга.

В следующем примере конструктор KeyframeEffect используется для создания набора ключевых кадров, которые определяют, как эмодзи рофл должен кататься по полу:

const emoji = document.querySelector("div"); // element to animate

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // keyframe
    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
  ],
  {
    // keyframe options
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);

// play rofl animation
rollingAnimation.play();

<div>🤣</div>

• API веб-анимаций
• Animation