This page was translated from English by the community.Learn more and join the MDN Web Docs community.
animation-direction
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..
Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS-свойствоanimation-direction определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.
Также удобно использовать сокращённое свойствоanimation, чтобы одновременно установить все свойства анимации.
| Начальное значение | normal |
|---|---|
| Применяется к | все элементы,::before и::afterпсевдоэлементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |
Синтаксис
/* Одиночная анимация */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.
Формальный синтаксис
animation-direction =
<single-animation-direction>#
<single-animation-direction> =
normal|
reverse|
alternate|
alternate-reverse
Примеры
Смотрите примерыCSS анимаций.
Спецификации
| Specification |
|---|
| CSS Animations Level 1 # animation-direction |