@keyframes: from and to

As explained in the previous lesson, the initial and final keyframes are set using the from and to keywords or 0% and 100% values.

Intermediate keyframes are set as percentage values. Here is a sample animation containing four frames:

@keyframes coloring {
  from { background-color: red; }
  33%  { background-color: yellow; }
  66%  { background-color: green; }
  to   { background-color: blue; }
}

Let’s try from, to and intermediate keyframes in action!