How to Create and Customize Animations in CSS

Lastly, the animation-fill-mode property determines how the element will be displayed before and after the animation is played.

By default, the element will not retain any styles from the animation.

Take a look at this example:

@keyframes change-bg-color {
  0% {
    background-color: white;
  }
  100% {
    background-color: darkviolet;
  }
}
 
div {
  /* . . . */
 
  background-color: aqua;
 
  animation-name: change-bg-color;
  animation-duration: 4s;
  animation-delay: 2s;
 
  animation-fill-mode: none;
}

The <div> element itself has background aqua, and the animation starts with background white, and ends with background darkviolet.

When set to forwards, the element retains the last keyframe of the animation after it is played. So, after the animation, the background of <div> will become darkviolet instead of aqua:

When set to backwards, the element adopts the first keyframe of the animation during delay. Meaning <div> starts with background white instead of aqua:

When set to both, the element will retain the first keyframe before the animation starts (behaves like backwards) and the last keyframe after the animation is over (behaves like forwards).

The animation shorthand

Just like with the transitions, CSS offers a shorthand property called animation, which has the following syntax:

animation: <animation_name> <animation_duration> <animation_timing_function> <animation_delay> <animation_iteration_count> <animation_direction>;

div {
  /* . . . */
 
  animation: change-bg-color 4s ease-in-out 2s 4 alternate;
}