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;
}