Controls the steps in a CSS animation sequence.

@keyframes keyframes-name {
   from {
      ... style rule ...
   }
   to {
      ... style rule ...
   }
}

Keyframes define the behavior of one cycle of an animation, wherein authors specify changes in CSS properties over time as a sequence of transitions.

Basically, an animation is enabled by assigning an animation-name to an element, and defining the cycle or seqence of the animation in a corresponding @keyframes at-rule.

.grows {
   animation-name: zoom;
}

@keyframes zoom {
   from {
      scale: 0;
   }
   to {
      scale: 2.5;
   }
}

Basic Animation: Text and Image Zoom Run Sample | View Source

The from and to keywords are aliases that corrrespond to 0% and 100% of the animation timeline respectively, denoting the start and end points of the cycle.

In addition, the @keyframes rule can define style rules at various possible intermediate points during the animation, specified as percentages of the animation duration, or timeline.

@keyframes glide-rotate {
   0% {
      translate: -120vw -40vw;
      rotate: 0deg;
   }
   25%, 75% {
      translate: 0px 0px;
   }
   50% {
      translate: 120vw -40vw;
      rotate: 360deg;
   }
   50.1% {
      translate: -120vw 80vw;
   }
   100% {
      translate: 120vw 80vw;
      rotate: 0deg;
   }
}

Basic Animation: Diagonal Glide with Rotate Run Sample | View Source

A keyframe style rule may also declare the animation-timing-function or easing function that is to be used, as the animation moves to the next keyframe.

@keyframes bounce {
   0% {
      translate: 0 -50vw;
   }
   30%, 50%, to {
      translate: 0;
      animation-timing-function: linear;
   }
   40%, 60% {
      translate: 0 -40px; scale: 1.1;
      animation-timing-function: ease-in-out;
   }
   70% {
      translate: 0 -20px; scale: 1.05;
   }
   80% {
      translate: 0; scale: .95;
      animation-timing-function: linear;
   }
   90% {
      translate: 0 -8px; scale: 1.02;
   }
}

Basic Animation: Text and Image Bounce Run Sample | View Source

The below examples show basic use of @keyframes to control the steps in a CSS animation sequence.

Basic Animation: Slide and Resize Run Sample | View Source

Basic Animation: Gradient Shift Run Sample | View Source

Basic Animation: Fade-In Fade-Out Run Sample | View Source

Below are other examples of @keyframes defining how the animation sequence should progress.

Basic Animation: Slide Swap Images Run Sample | View Source

Basic Animation: Zoom and Swap Images Run Sample | View Source

Basic Animation: Multi-Image Dissolve Run Sample | View Source

For a brief overview, please see Understanding and Using CSS Animations.

External reference: CSS Animations Level 1

CSS Animation Properties