animation-direction
Experimental
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS-свойство animation-direction
определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.
Также удобно использовать сокращённое свойство animation
, чтобы одновременно установить все свойства анимации.
Начальное значение | normal |
---|---|
Применяется к | все элементы, ::before и ::after псевдоэлементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Синтаксис
/* Одиночная анимация */
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># (en-US)где
<single-animation-direction> = normal | (en-US) reverse | (en-US) alternate | (en-US) alternate-reverse
Примеры
Смотрите примеры CSS анимаций.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Animations Level 1 Определение '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! (en-US)
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Да)-webkit (en-US) | 5.0 (5.0)-moz (en-US) 16.0 (16.0) |
10 | 12-o (en-US) 12.50 |
4.0-webkit (en-US) |
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 (en-US) 16.0 (16.0) |
? | ? | ? | (Да)-webkit (en-US) |
reverse |
Нет | ? | 16.0 (16.0) | ? | ? | Нет | (Да)-webkit (en-US) |
alternate-reverse |
? | ? | 16.0 (16.0) | ? | ? | ? | (Да)-webkit (en-US) |
Без префиксов | Нет | Нет | ? | ? | ? | ? | 43.0 |