How to Create and Customize Animations in CSS

The animation-direction property defines in which direction the animation will be played, and it accepts four different options:

• normal: The animation is played forward.
• reverse: The animation is played backward.
• alternate: The animation is played forward first, then backward. This only works when animation-iteration-count is more than 1.
• alternate-reverse: The animation is played backward first, then forward.

div {
  /* . . . */
 
  animation-name: change-bg-color;
  animation-duration: 4s;
 
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
 
  animation-iteration-count: 4;
  animation-direction: alternate;
}