How to Create and Customize Animations in CSS

Besides the transitions, there is also a similar concept called animation. Their main difference is that:

• Transition requires a trigger, defined with a pseudo-selector.
• Animation plays automatically once it is loaded.

Create an animation

To create an animation, first define keyframes using the @keyframes rule.

@keyframes change-bg-color {
  from {
    background-color: white;
  }
  to {
    background-color: darkviolet;
  }
}

In this example, the animation is named change-bg-color, and it changes the background-color from white to darkviolet.

To apply this animation to an element, specify the animation-name and animation-duration properties.

div {
  /* . . . */

  animation-name: change-bg-color;
  animation-duration: 4s;
}

Instead of using the keywords from and to, it is also possible to use percentage values, which allows you to create multi-step animations.

@keyframes change-bg-color {
  0% {
    background-color: white;
  }
  25% {
    background-color: bisque;
  }
  50% {
    background-color: crimson;
  }
  100% {
    background-color: darkviolet;
  }
}

Take a look at this example:

<div class="four-kf-animation">4 Keyframes Animation</div>

@keyframes change-bg-color-4kf {
  0% {
    background-color: white;
  }
  25% {
    background-color: bisque;
  }
  50% {
    background-color: crimson;
  }
  100% {
    background-color: darkviolet;
  }
}

.four-kf-animation {
  padding: 10px;
  margin: auto;
  border: 2px solid darkviolet;
  border-radius: 10px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;

  color: darkviolet;
  width: 200px;

  animation-name: change-bg-color-4kf;
  animation-duration: 5s;
}

The background color changes from white to bisque to crimson to darkviolet.

Like transitions, animation allows you to define properties such as animation-timing-function and animation-delay. These work exactly the same as their transition counterparts.

div {
  /* . . . */

  animation-name: change-bg-color;
  animation-duration: 4s;

  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}

Animation iteration count

You can also define how many times you wish the animation to repeat using the animation-iteration-count property.

div {
  /* . . . */

  animation-name: change-bg-color;
  animation-duration: 4s;

  animation-timing-function: ease-in-out;
  animation-delay: 2s;

  animation-iteration-count: 3;
}

Animation direction

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. 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;
}

Animation fill mode

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.

@keyframes change-bg-color {
  0% {
    background-color: white;
  }
  25% {
    background-color: bisque;
  }
  50% {
    background-color: crimson;
  }
  100% {
    background-color: darkviolet;
  }
}

div {
  /* . . . */

  background-color: aqua;

  animation-name: change-bg-color;
  animation-duration: 4s;

  animation-fill-mode: none;
}

When set to forwards, the element will retain the styles from the last keyframe of the animation after the animation is played.

When set to backwards, the element will adopt the styles from the first keyframe of the animation as soon as the animation is played.

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

The animation shorthand

Lastly, 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;
}