Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Описание

CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.

Также удобно использовать сокращенное свойство animation, чтобы одновременно установить все свойства анимации.

Начальное значениеnormal
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Одиночная анимация */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Несколько анимаций */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Глобальные значения */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

Значения

normal
Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
reverse
Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.
alternate
Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.
alternate-reverse
Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с конечного переходит в начальное, в зависимости от количества итераций анимации animation-iteration-count.
 

Формальный синтаксис

<single-animation-direction>#

где
<single-animation-direction> = normal | reverse | alternate | alternate-reverse

Примеры

Смотрите примеры CSS анимаций.

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

Спецификация Статус Комментарий
CSS Animations
Определение 'animation-direction' в этой спецификации.
Рабочий черновик Начальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Да)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.50
4.0-webkit
reverse 19 16.0 (16.0) 10 Нет Нет
alternate-reverse 19 16.0 (16.0) 10 Нет Нет
Unprefixed 43.0 ? ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? 5.0 (5.0)-moz
16.0 (16.0)
? ? ? (Да)-webkit
reverse Нет ? 16.0 (16.0) ? ? Нет (Да)-webkit
alternate-reverse ? ? 16.0 (16.0) ? ? ? (Да)-webkit
Без префиксов Нет Нет ? ? ? ? 43.0

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Mrakobees, Akh-rman, Rammfall, andreww2012
Обновлялась последний раз: mdnwebdocs-bot,