CSS animation-direction

The animation-direction property in CSS specifies whether the animation should play forwards, backwards, or alternate between the two directions. The possible values for this property are normal, reverse, alternate, and alternate-reverse.

Here is how each value works:

normal: The animation plays forwards from the beginning to the end.
reverse: The animation plays backwards from the end to the beginning.
alternate: The animation plays forwards, then backwards, then forwards again in a loop.
alternate-reverse: The animation plays backwards, then forwards, then backwards again in a loop.

Let's see some examples to understand how animation-direction works in CSS:

.box {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: slide 2s linear infinite;
      animation-direction: normal;
    }

    @keyframes slide {
      0% { transform: translateX(0); }
      100% { transform: translateX(200px); }
    }

Result:

.square {
      width: 100px;
      height: 100px;
      background-color: red;
     
      animation: rotate 6s linear infinite;
      animation-direction: alternate;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Result:

In the first example, the animation plays forwards in a linear motion, while in the second example, the animation alternates between forwards and backwards in a loop.

Experiment with different values of animation-direction and see how it affects the animation direction and behavior in your own CSS animations.