# Свойство animation-direction

Свойство `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`, представляющие собой анимацию по наведению на элемент

←→
↑