What Are CSS Keyframes?

In CSS, keyframes allow you to create animations. Animations are created by defining a set of keyframes, and then specifying the property values for each keyframe.

When the animation is played, the browser will go through the keyframes and animate between the property values defined in each one.

Take this example:

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

When you render the animation (see the code below) the browser will fade the div in with the duration of 3 seconds.

div {
  animation: 3s fade-in;
}