CSS animation-direction Property

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

Demo:

Syntax:

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.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

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

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Enjoy coding!

Share this: