css властивість animation-play-state


Властивість animation-play-state визначає, програвати анімацію чи поставити її на паузу. При продовженні встановленої на паузі анімації вона починається з того моменту де була зупинена.

Демонстрація анімації може бути призупинена, якщо для властивості animation-play-state задано значення paused. Щоб продовжити демонстрацію, встановіть для неї значення running.

На прикладі ми бачимо, що елемент із animation-play-state: running; анімується, без цієї властивості - ні:

Властивість `animation-play-state`

Нотатка:

Ця властивість використовується в JavaScript, щоб призупинити анімацію в середині циклу.

Порада:

Рекомендується використовувати універсальну властивість animation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

Синтаксис

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

Властивість animation-play-state може отримувати 4 значення:

paused

Призупинити анімацію.

running

Програвати анімацію. Без задання

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

Значення без задання: running
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.animationPlayState="paused"

Переглядачі

Переглядач
animation-play-state

43.0
3.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

12.10
12.0 -o-

12.0

Переглядач
animation-play-state

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад зупинки/запуску анімації за допомогою JavaScipt

Простий приклад дії анімації

Пауза для анімації

div { 


  -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ 


  animation-play-state: paused; 


}

Додаткові посилання