@keyframes: frame grouping

Keyframes in @keyframes can be grouped simply by putting them into a comma-separated list. Let’s consider the following example:

@keyframes stretching {
  0%, 50% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

In this example, the first two frames are grouped. The element being animated will first change its width to 100px and will remain that way for half of the animation’s duration. After that, it will stretch further from 100px to 200px.