Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Animation это интерфейс Web Animations API, представляет из себя одиночный проигрыватель анимации и обеспечивает управление воспроизведением и временную шкалу для узла анимации или источника.
Конструктор
Animation()- Создает новый экземпляр объекта
Animation.
Свойства
Animation.currentTime- Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет
timeline, неактивна или еще не воспроизведена, то это значение равно нулю.
Animation.effect- Возвращает и задает
AnimationEffectReadOnlyсвязанный с этой анимацией. Обычно это объектKeyframeEffect. Animation.finishedТолько для чтения- Возвращает текущее завершенное Promise(обещание) для этой анимации.
Animation.id- Возвращает и задает String(строку), используемую для идентификации анимации.
Animation.playStateТолько для чтения- Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.
Animation.playbackRate- Возвращает или задает скорость воспроизведения анимации.
Animation.readyТолько для чтения- Возвращает текущее готовое Promise(обещание) для этой анимации.
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()- Задает скорость анимации после синхронизации ее положения воспроизведения.
Спецификации
| Спецификация | Статус | Комментарии |
|---|---|---|
| Web Animations Определение 'Animation' в этой спецификации. |
Рабочий черновик | Initial definition |
Совместимость с браузерами
| 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 было только для чтения.