Свойство animation-direction задает направление анимации. По умолчанию анимация повторится только 1 раз и затем вернется в исходное состояние, затем, если задана задержка animation-delay, будет ждать заданное время и потом цикл начнется сначала.
Данное свойство позволяет поменять это поведение, например, так чтобы анимация после окончания оставалась в том месте, где она закончилась, а не перескакивала в начальное положение.
Также можно задать такое поведение: анимация дойдет до крайней точки и вернется обратно (как в transition). Смотрите описание ниже.
Синтаксис
селектор {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Значения
Значение | Описание |
---|---|
reverse | Анимация будет проигрываться в обратном направлении. |
alternate | Анимация будет проигрываться сначала в прямом, а потом в обратном направлении (как transition). |
alternate-reverse | Анимация будет проигрываться из конечного положения в начальное и обратно. По сути это значения alternate и reverse в одном флаконе. |
normal | Анимация будет проигрываться от начала к концу, а после окончания скачком перескакивать в начальное положение. |
Значение по умолчанию: normal.
Пример
Сейчас элемент будет двигаться в одну сторону, а потом возвращаться обратно, так как задано значение alternate. При этом animation-duration имеет значение 3 секунды и это значит, что перемещения "туда" и "обратно" будут длиться по 3 секунды:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-direction: alternate;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример
Сейчас элемент будет двигаться в обратную сторону (должен слева направо, а будет справа налево):
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-direction: reverse;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример
Сейчас элемент будет двигаться туда-сюда, но в обратном направлении (должен начинать слева, а будет начинать справа):
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-direction: alternate-reverse;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Смотрите также
-
свойство animation-name,
которое задает имя анимации -
свойство animation-duration,
которое задает продолжительность анимации -
свойство animation-delay,
которое задает задержку перед выполнением анимации -
свойство animation-timing-function,
которое задает скорость выполнения анимации -
свойство animation-iteration-count,
которое задает количество итераций анимации -
свойство animation-fill-mode,
которое задает состояние анимации -
свойство animation-play-state,
которое позволяет поставить анимацию на паузу -
свойство animation,
представляющее собой сокращение для анимаций -
команду @keyframes,
задающую ключевые кадры анимации - плавные переходы transition, представляющие собой анимацию по наведению на элемент