css властивість animation-play-state
Властивість animation-play-state визначає, програвати анімацію чи поставити її на паузу. При продовженні встановленої на паузі анімації вона починається з того моменту де була зупинена.
Демонстрація анімації може бути призупинена, якщо для властивості animation-play-state задано значення paused. Щоб продовжити демонстрацію, встановіть для неї значення running.
На прикладі ми бачимо, що елемент із animation-play-state: running; анімується, без цієї властивості - ні:
| Нотатка: | Ця властивість використовується в JavaScript, щоб призупинити анімацію в середині циклу. |
| Порада: | Рекомендується використовувати універсальну властивість |
Синтаксис
animation-play-state: paused|running|initial|inherit;Властивість animation-play-state може отримувати 4 значення:
| Значення без задання: | running |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.animationPlayState="paused" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| animation-play-state | 43.0 |
10.0 |
16.0 |
9.0 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| animation-play-state | 2.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад зупинки/запуску анімації за допомогою JavaScipt
Простий приклад дії анімації
Пауза для анімації
div {
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}