EffectTiming

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

Словарь EffectTiming, входящий в состав Web Animations API, используется в Element.animate(), KeyframeEffectReadOnly(), и KeyframeEffect() для описания временных свойств анимационных эфектов. Все эти свойства необязательные, хотя без установки duration анимация не будет воспроизводиться.

Проще говоря, эти свойства описывают как user agent должен выполнять переход от ключевого кадра к ключевому кадру, и как вести себя, когда анимация начинается и заканчивается.

Свойства

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, чтобы повторять анимацию до тех пор, пока элемент существует.

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

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

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
EffectTiming
Экспериментальная
Chrome Полная поддержка 67
Полная поддержка 67
Нет поддержки 52 — 67
Альтернативное имя
Альтернативное имя Использует нестандартное имя: AnimationEffectTimingProperties
Edge Полная поддержка ≤79Firefox Полная поддержка 63IE ? Opera Полная поддержка ДаSafari ? WebView Android Полная поддержка 67
Полная поддержка 67
Нет поддержки 52 — 67
Альтернативное имя
Альтернативное имя Использует нестандартное имя: AnimationEffectTimingProperties
Chrome Android Полная поддержка 67
Полная поддержка 67
Нет поддержки 52 — 67
Альтернативное имя
Альтернативное имя Использует нестандартное имя: AnimationEffectTimingProperties
Firefox Android Полная поддержка 63Opera Android Полная поддержка ДаSafari iOS ? Samsung Internet Android Полная поддержка Да
delay
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка ≤79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
direction
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка ≤79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
duration
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка ≤79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
easing
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка ≤79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Полная поддержка ДаSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
endDelay
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка 79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
fill
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка 79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
iterations
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка ≤79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
iterationStart
Экспериментальная
Chrome Полная поддержка 52Edge Полная поддержка ≤79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да

Легенда

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

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