animation-play-state

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Описание

Свойство animation-play-state определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.

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

Начальное значениеrunning
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Обработка значениякак указано
Animation typeNot animatable

Синтаксис

css
/* Одна анимация */
animation-play-state: running;
animation-play-state: paused;

/* Несколько анимаций */
animation-play-state: paused, running, running;

/* Глобальные значения */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;

Значения

running

Анимация проигрывается.

paused

Анимация поставлена на паузу.

Формальный синтаксис

animation-play-state = 
  <single-animation-play-state>#  

<single-animation-play-state> = 
  running  |
  paused

Примеры

См. CSS animations.

Спецификации

Specification
CSS Animations Level 1
# animation-play-state

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также