Element.animate()

 

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

Метод animate() интерфейса Element это быстрый способ создания Animation, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса Animation.

Элементы  могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав Element.getAnimations().

Синтаксис

var animation = element.animate(keyframes, options); 

Параметры

keyframes

Массив объектов ключевых кадров, либо объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите Keyframe Formats для получения подробной информации.

options
Целое число, представляющее продолжительность анимации (в миллисекундах), или объект, содержащий одно или более временных свойств.
id Необязательный
Свойство уникальное для animate()DOMString, с помощью которого можно ссылаться на анимацию.
delay Необязательный
Число миллисекунд для задержки начала анимации. По умолчанию 0.
direction Необязательный
Указывает направление анимации. Она может выполняться вперёд (normal), назад (reverse), переключать направление после каждой итерации (alternate), или работать назад и переключать после каждой итерации (alternate-reverse). По умолчанию "normal".
duration Необязательный
Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно 0.
easing Необязательный
Скорость изменения анимации с течением времени. Принимает заранее определённые значения "linear", "ease", "ease-in", "ease-out", и "ease-in-out", или кастомное "cubic-bezier" со значением типа "cubic-bezier(0.42, 0, 0.58, 1)". По умолчанию "linear".
endDelay Необязательный
Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию 0.
fill Необязательный
Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением ("backwards"), сохраняться после того, как анимация завершилась ("forwards"), или и то и другое ("both"). По умолчанию "none".
iterationStart Необязательный
Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию 0.0.
iterations Необязательный
Число раз, которое анимация должна повторяться. По умолчанию 1, может принимать значение до Infinity, чтобы повторять анимацию до тех пор, пока элемент существует.

Будущие возможности

Следующие возможности в настоящее нигде не поддерживаются, но будут добавлены в ближайшем будущем .

composite Необязательный
Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию replace.
  • add диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с transformtranslateX(-200px) не будут переопределять ранний вариант со значением rotate(20deg), поэтому результат будет translateX(-200px) rotate(20deg).
  • accumulate схоже, но немного умнее: blur(2) и blur(5) станет blur(7), а не blur(2) blur(5).
  • replace переписывает предыдущие значения на новые.
iterationComposite Необязательный
Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как accumulate или replace (смотрите выше). По умолчанию replace.
spacing Необязательный
Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию distribute.
  • distribute позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распеределены по всему времени проигрыша анимации.
  • paced позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.

 

Возвращаемое значение

Возвращает Animation.

Пример

В демо Down the Rabbit Hole (with the Web Animation API), мы используем удобный метод animate(), чтобы сразу создать и проиграть анимацию на элементе #tunnel, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translate3D(0, 0, 0)' }, 
  { transform: 'translate3D(0, -300px, 0)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
})

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

Спецификация Статус Комментарий
Web Animations
Определение 'animate()' в этой спецификации.
Рабочий черновик Первоначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
animate
Экспериментальная
Chrome Полная поддержка 36Edge Полная поддержка 79Firefox Полная поддержка 48IE Нет поддержки НетOpera Полная поддержка 23Safari Полная поддержка 13.1
Полная поддержка 13.1
Полная поддержка Да
Отключено
Отключено This feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.
WebView Android Полная поддержка 37Chrome Android Полная поддержка 36Firefox Android Полная поддержка 48Opera Android Полная поддержка 24Safari iOS Полная поддержка 13.4Samsung Internet Android Полная поддержка 3.0
composite option
Экспериментальная
Chrome Полная поддержка 79
Отключено
Полная поддержка 79
Отключено
Отключено From version 79: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 79
Отключено
Полная поддержка 79
Отключено
Отключено From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox Полная поддержка 80
Полная поддержка 80
Нет поддержки 63 — 79
Отключено
Отключено From version 63 until version 79 (exclusive): this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
Нет поддержки 53 — 63
Отключено
Отключено From version 53 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 66
Отключено
Полная поддержка 66
Отключено
Отключено From version 66: this feature is behind the Experimental Web Platform Features preference.
Safari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 79
Отключено
Полная поддержка 79
Отключено
Отключено From version 79: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 63
Отключено
Полная поддержка 63
Отключено
Отключено From version 63: this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
Нет поддержки 53 — 63
Отключено
Отключено From version 53 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
id option
Экспериментальная
Chrome Полная поддержка 50Edge Полная поддержка 79Firefox Полная поддержка 48IE Нет поддержки НетOpera Полная поддержка 37Safari Нет поддержки НетWebView Android Полная поддержка 50Chrome Android Полная поддержка 50Firefox Android Полная поддержка 48Opera Android Полная поддержка 37Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 5.0
Implicit to/from keyframes are supported
Экспериментальная
Chrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Currently Chrome Canary only
Edge Нет поддержки НетFirefox Полная поддержка 75IE Нет поддержки НетOpera Нет поддержки НетSafari Частичная поддержка 13.1
Замечания
Частичная поддержка 13.1
Замечания
Замечания Implementation seems somewhat buggy. More information will follow when available.
WebView Android Нет поддержки НетChrome Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Currently Chrome Canary only
Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Частичная поддержка 13.4
Замечания
Частичная поддержка 13.4
Замечания
Замечания Implementation seems somewhat buggy. More information will follow when available.
Samsung Internet Android Нет поддержки Нет
iterationComposite option
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 80
Полная поддержка 80
Нет поддержки 63 — 79
Отключено
Отключено From version 63 until version 79 (exclusive): this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
Нет поддержки 51 — 63
Отключено
Отключено From version 51 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 63
Отключено
Полная поддержка 63
Отключено
Отключено From version 63: this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
Нет поддержки 51 — 63
Отключено
Отключено From version 51 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
pseudoElement option
Экспериментальная
Chrome Частичная поддержка 81
Замечания Отключено
Частичная поддержка 81
Замечания Отключено
Замечания A valid animation object is returned but the targeted pseudoelement is not visually animated.
Отключено From version 81: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Частичная поддержка 81
Замечания Отключено
Частичная поддержка 81
Замечания Отключено
Замечания A valid animation object is returned but the targeted pseudoelement is not visually animated.
Отключено From version 81: this feature is behind the Experimental Web Platform Features preference.
Firefox Полная поддержка 75IE Нет поддержки НетOpera Частичная поддержка 68
Замечания Отключено
Частичная поддержка 68
Замечания Отключено
Замечания A valid animation object is returned but the targeted pseudoelement is not visually animated.
Отключено From version 68: this feature is behind the Experimental Web Platform Features preference.
Safari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Частичная поддержка 81
Замечания Отключено
Частичная поддержка 81
Замечания Отключено
Замечания A valid animation object is returned but the targeted pseudoelement is not visually animated.
Отключено From version 81: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

Смотрите также