Animation

Baseline Widely available

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

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Animation это интерфейс Web Animations API, представляет из себя одиночный проигрыватель анимации и обеспечивает управление воспроизведением и временную шкалу для узла анимации или источника.

Конструктор

Animation()

Создаёт новый экземпляр объекта Animation.

Свойства

Animation.currentTime

Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет timeline, неактивна или ещё не воспроизведена, то это значение равно нулю.

Animation.effect

Возвращает и задаёт AnimationEffectReadOnly связанный с этой анимацией. Обычно это объект KeyframeEffect.

Animation.finished Только для чтения

Возвращает промис, сигнализирующий о завершении анимации.

Animation.id

Возвращает и задаёт String(строку), используемую для идентификации анимации.

Animation.playState Только для чтения

Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.

Animation.playbackRate

Возвращает или задаёт скорость воспроизведения анимации.

Animation.ready Только для чтения

Возвращает промис, сигнализирующий о начале проигрывания анимации.

Animation.startTime

Возвращает или задаёт начало выполнения анимации.

Animation.timeline

Возвращает или задаёт timeline, связанную с этой анимации.

Обработчики событий

Animation.oncancel

Возвращает и задаёт обработчик событий для отмены события.

Animation.onfinish

Возвращает и задаёт обработчик событий для завершения события.

Методы

Animation.cancel()

Очищает все keyframeEffects вызванные этой анимацией и прекращает его выполнение.

animation.commitStyles()

Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведёт к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.

Animation.finish()

Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.

Animation.pause()

Приостанавливает запущенную анимацию.

animation.persist()

Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.

Animation.play()

Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.

Animation.reverse()

Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.

Animation.updatePlaybackRate()

Задаёт скорость анимации после синхронизации её положения воспроизведения.

Спецификации

Specification
Web Animations
# the-animation-interface

Совместимость с браузерами

BCD tables only load in the browser