Define animation waypoints

@keyframes

The @keyframes rule is used to define the waypoints in an animation sequence. Waypoints provide control over the intermediate steps of an animation sequence.

Properties

Keyframes must provide an animation-name that matches a name chosen and declared elsewhere in CSS .

Keyframes may specify either from and to waypoints, or three or more percentage waypoints.

Examples

@keyframes grow-height {
  from {
    height: 0px;
  }

  to {
    height: 100px;
  }
}

Specifying from and to waypoints

@keyframes grow-height {
  0% {
    height: 0px;
    opacity: 0.0;
  }

  33% {
    height: 50px;
    opacity: 0.25;
  }

  66% {
    height: 100px;
    opacity: 0.25;
  }

  100% {
    height: 100px;
    opacity: 1.0;
  }
}

Specifying waypoints as percentages