тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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