С помощью CSS можно создавать сложные анимации и очень гибко управлять ими. Описание CSS-анимации состоит из двух частей: набора ключевых кадров keyframes и параметров самой анимации.

Вот пример описания ключевых кадров анимации:

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

Анимация в примере имеет название stretching, и в ней описывается, как будет меняться стиль блока от начальной до конечной точки. Эту анимацию можно применить к любому элементу, для этого достаточно добавить в CSS два свойства — animation-name (название анимации) и animation-duration (длительность) — и задать им нужные значения. Например:

.button {
  animation-name: stretching;
  animation-duration: 1s;
}

Этот код назначит анимацию stretching элементам с классом button. В результате работы анимации элемент плавно увеличит ширину со 100px до 200px за 1 секунду, а затем вернётся в исходное состояние.