Web development

CSS animation-direction Property

CSS animation-direction Property

The CSS animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.



animation-direction: normal|reverse|alternate|alternate-reverse;

normal (default) – the animation is played as normal (forwards).

reverse – the animation is played in the reverse direction (backwards).

alternate – the animation is played forwards first, then backwards.

alternate-reverse – the animation is played backwards first, then forwards.


<!DOCTYPE html>

.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: move 4s infinite;
  animation-direction: reverse;

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}

<div class="square"></div>



Enjoy coding!

Read also:

How to use CSS steps() Function ?/ CSS typing effect

CSS animation-play-state Property

CSS animation-name Property