Animation

Experimental

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

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

Конструктор

Animation() (en-US): Создаёт новый экземпляр объекта Animation.

Свойства

Animation.currentTime (en-US): Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет timeline (en-US), неактивна или ещё не воспроизведена, то это значение равно нулю.

Animation.effect (en-US): Возвращает и задаёт AnimationEffectReadOnly (en-US) связанный с этой анимацией. Обычно это объект KeyframeEffect (en-US).
Animation.finished (en-US) Только для чтения: Возвращает промис, сигнализирующий о завершении анимации.

Animation.id (en-US): Возвращает и задаёт String(строку), используемую для идентификации анимации.
Animation.playState (en-US) Только для чтения: Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.

Animation.playbackRate (en-US): Возвращает или задаёт скорость воспроизведения анимации.

Animation.ready (en-US) Только для чтения: Возвращает промис, сигнализирующий о начале проигрывания анимации.

Animation.startTime (en-US): Возвращает или задаёт начало выполнения анимации.

Animation.timeline (en-US): Возвращает или задаёт timeline (en-US), связанную с этой анимации.

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

Animation.oncancel (en-US): Возвращает и задаёт обработчик событий для отмены события.
Animation.onfinish (en-US): Возвращает и задаёт обработчик событий для завершения события.

Методы

Animation.cancel(): Очищает все keyframeEffects (en-US) вызванные этой анимацией и прекращает его выполнение.
animation.commitStyles() (en-US): Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведёт к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.

Animation.finish() (en-US): Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.

Animation.pause() (en-US): Приостанавливает запущенную анимацию.
animation.persist() (en-US): Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.

Animation.play() (en-US): Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.

Animation.reverse() (en-US): Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.
Animation.updatePlaybackRate() (en-US): Задаёт скорость анимации после синхронизации её положения воспроизведения.

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

Спецификация	Статус	Комментарии
Web Animations Определение 'Animation' в этой спецификации.	Рабочий черновик	Initial definition

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Настольные
Мобильные

Feature	Chrome	Firefox (Gecko)	Microsoft Edge	Internet Explorer	Opera	Safari (WebKit)
Базовая поддержка	39.0 [1]	48 (48)^[2][3]	?	Нет	Нет	Нет
Конструктор	Нет	48 (48)^[2][3]	?	Нет	Нет	Нет

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Базовая поддержка	(Да) [1]	48.0 (48)^[2][3]	Нет	Нет	Нет
Конструктор	Нет	48.0 (48)^[2][3]	Нет	Нет	Нет

[1] До Chrome 44, реализован как AnimationPlayer (название интерфейса в ранней версии спецификации).

[2] API Веб Анимации включён по умолчанию только в Firefox Developer Edition и в Nightly builds. Вы можете включить его в сборках beta и release переключив свойство dom.animations-api.core.enabled на true, и можете выключить его в любой версии Firefox переключив его на false.

[3] До Firefox 51, свойство Animation.effect (en-US) было только для чтения.