Свойство animation-direction задает направление анимации. По умолчанию анимация повторится только 1 раз и затем вернется в исходное состояние, затем, если задана задержка animation-delay, будет ждать заданное время и потом цикл начнется сначала. Данное свойство позволяет поменять это поведение, например, так чтобы анимация после окончания оставалась в том месте, где она закончилась, а не перескакивала в начальное положение. Также можно задать такое поведение: анимация дойдет до крайней точки и вернется обратно (как в transition). Смотрите описание ниже.

Данное свойство входит в свойство-сокращение animation.

См. все свойства для CSS анимации animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes.

См. также transition - плавные переходы (анимация по наведению на элемент).

Синтаксис

селектор {
	animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
}

Для анимирования нескольких свойств следует задавать значения через запятую:

селектор {
	animation-duration: normal, reverse, alternate;
}

Значения

Значение Описание
reverse Анимация будет проигрываться в обратном направлении.
alternate Анимация будет проигрываться сначала в прямом, а потом в обратном направлении (как transition).
alternate-reverse Анимация будет проигрываться из конечного положения в начальное и обратно. По сути это значения alternate и reverse в одном флаконе.
initial Устанавливает значение свойства в значение по умолчанию.
normal Анимация будет проигрываться от начала к концу, а после окончания скачком перескакивать в начальное положение.
inherit Наследует значение родителя.

Значение по умолчанию: normal.

Примеры

Внимание! Кроссбраузерные приставки для анимации опущены для краткости, но они нужны! Как сделать кроссбраузерно смотрите по ссылке keyframes.

Пример

Сейчас элемент будет двигаться в одну сторону, а потом возвращаться обратно, так как задано значение alternate. При этом animation-duration имеет значение 3 секунды и это значит, что перемещения "туда" и "обратно" будут длиться по 3 секунды.

@keyframes move {
	from {
		margin-left: 0px;
	}
	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;
}

Результат выполнения кода:

Пример

Сейчас элемент будет двигаться в обратную сторону (должен слева направо, а будет справа налево):

@keyframes move {
	from {
		margin-left: 0px;
	}
	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;
}

Результат выполнения кода:

Пример

Сейчас элемент будет двигаться туда-сюда, но в обратном направлении (должен начинать слева, а будет начинать справа):

@keyframes move {
	from {
		margin-left: 0px;
	}
	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;
}

Результат выполнения кода:

Наведи на меня, что анимация началась.