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