CSS анимация с паузой между итерациями

Предположим, у нас есть анимация, которая должна длиться одну секунду, потом должна наступать пауза длительностью четыре секунды, затем анимация должна снова повториться. На первый взгляд, ничего сложного. Но на самом деле не все так просто, но все же реализуемо. Нужно просто имитировать паузу.

Что не подойдет

Существует свойство animation-delay, которое устанавливает время ожидания перед запуском анимации, но после ее запуска, каждая итерация повторяется непрерывно.

Решение: ключевые кадры без изменений

Вернемся к нашей предполагаемой анимации. Она должна длиться 1 секунду + пауза между итерациями 4 секунды = в сумме имеем 5 секунд.

Поэтому, при вызове анимации, мы должны указать общее количество секунд:

.mover {
  animation: move 5s infinite;
}

Но теперь все, что в нашем правиле @keyframes, будет длиться 5 секунд:

@keyframes move {
  /* Все что здесь будет длиться 5 секунд */
}

Для того чтобы анимация длилась всего 1 секунду, нужно чтобы все изменения происходили за 1/5 времени, то есть 20%. Вот как это будет выглядеть:

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  /* Все изменения заканчиваются здесь */
  20% {
    transform: translate(200px, 0);
  }

  /* Между 20% и 100% ничего не меняется */
  100% {
    transform: translate(200px, 0);
  }
}

Это можно записать более кратко опустив ключевой кадр 0%, так как предполагается изначальное значение, а так же использовать запись через запятую для повторяющихся действий:

@keyframes move {
  20%, 100% {
    transform: translate(200px, 0);
  }
}

Таким образом, с ключевыми кадрами можно проделывать все что угодно аж до последнего шага, а между ним и 100% все должно быть одинаковым.

Пример

See the Pen
Keyframe with Animation Delay Between Iterations by Chris Coyier (@chriscoyier)
on CodePen.

Оригинал: CSS Keyframe Animation with Delay Between Iterations