CSS свойство animation-play-state

Свойство animation-play-state определяет, проигрывать анимацию или поставить её на паузу. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена.

Значения свойства можно изменять с помощью JavaScript, чтобы останавливать и запускать анимацию в определённое время.

CSS синтаксис

animation-play-state: paused | running | initial | inherit;

Возможные значения

Значение	Описание
paused	Поставить анимацию на паузу.
running	Значение по умолчанию. Проигрывать анимацию.
inherit	Значение наследуется от родительского элемента.
initial	Устанавливает значение по умолчанию.

Пример использования

Поставим анимацию на паузу


div {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
}