animation-play-state

Общие сведения

Когда анимация приостанавливается, она сохраняет все значения свойств до которых успела дойти до её остановки. То есть элемент продолжает выглядеть так, как он выглядел на момент остановки анимации. Когда воспроизведение анимации возобновляется (снимается с паузы), оно продолжается с того же места где была произведена остановка.

Синтаксис свойства

• Синтаксис:

  animation-play-state: running | paused

• Значение по умолчанию: running
• Применяется: ко всем элементам и псевдоэлементам ::before и ::after
• Наследуется: нет
• Анимируется: нет

Значения свойства

• running - когда свойство animation-play-state установлено в running, анимация обрабатывается как обычно.
• paused - когда свойство animation-play-state установлено в paused, анимация приостанавливает своё воспроизведение. 

Поддержка браузерами

Примечание

Вы можете указать одно или несколько, разделённых запятыми, значений в animation-play-state. Когда вы предоставляете список значений, этот список обычно сопоставляется со списком значений предоставляемым другими свойствами связанными с анимацией, такими как animation-delay, animation-timing-function и animation-name, и другими. Каждый список значений в этих свойствах обрабатывается как массив, в котором у каждого значения есть собственный индекс. После этого значение по индексу сопоставляется со значением из другого списка.

Свойство animation-play-state обычно указывается как часть сокращённого свойства animation.

Пример