Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

animation-play-state

CSSanimation-play-state
mangohost

Свойство animation-play-state задаёт состояние анимации, проигрывается или приостановлена.

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

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

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

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

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

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

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

CSS Animation

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

Примечание

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

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

Пример

mangohost