Теперь разберём, как добавить элементу вторую параллельную анимацию.

Допустим, у нас есть две анимации:

@keyframes move {
  to { left: 100px; }
}
@keyframes stretch {
  to { width: 100px; }
}

Чтобы назначить элементу вторую анимацию, нужно добавить её название и длительность через запятую в свойствах animation-name и animation-duration. Вот так:

.element {
  animation-name: move, stretch;
  animation-duration: 5s, 5s;
}

В этом примере две анимации запустятся одновременно, элемент будет параллельно двигаться и удлиняться в течение 5-ти секунд.

Множественные анимации задаются так же, как и множественные фоны и тени — с помощью перечисления свойств через запятую.

Добавим к элементу из прошлого шага вторую анимацию.