Ещё одно управляющее свойство CSS-анимаций — animation-play-state. С его помощью можно поставить анимацию «на паузу», а потом возобновить с места остановки.

Свойство принимает два значения running и paused. Как видно из названий, paused приостанавливает анимацию, а running начинает или возобновляет анимацию, поставленную на паузу. Значение running задано по умолчанию.

Попробуем создать анимацию и управлять процессом её проигрывания.