EffectTiming
============

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

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

Свойства
--------

`delay` (en-US) Необязательный

Число миллисекунд для задержки начала анимации. По умолчанию `0`.

`direction` (en-US) Необязательный

Указывает направление анимации. Она может выполняться вперёд (`normal`), назад (`reverse`), переключать направление после каждой итерации (`alternate`), или работать назад и переключать после каждой итерации (`alternate-reverse`). По умолчанию `"normal"`.

`duration` (en-US) Необязательный

Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно `0`.

`easing` (en-US) Необязательный

Скорость изменения анимации с течением времени. Принимает заранее определённые значения `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"`, и `"ease-in-out"`, или кастомное `"cubic-bezier"` со значением типа `"cubic-bezier(0.42, 0, 0.58, 1)"`. По умолчанию `"linear"`.

`endDelay` (en-US) Необязательный

Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию `0`.

`fill` (en-US) Необязательный

Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением (`"backwards"`), сохраняться после того, как анимация завершилась (`"forwards"`), или и то и другое ("`both")`. По умолчанию `"none"`.

`iterationStart` (en-US) Необязательный

Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию `0.0`.

`iterations` (en-US) Необязательный

Число раз, которое анимация должна повторяться. По умолчанию `1`, может принимать значение до `Infinity`, чтобы повторять анимацию до тех пор, пока элемент существует.

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-keyframeeffect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Web Animations API
* Using the Web Animations API
* `Element.animate()`
* `KeyframeEffect()`
* `KeyframeEffectReadOnly()` (en-US)