Animation

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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