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

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

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

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

правити

Порада

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

paused

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

автор: Svitlana

правити

running

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
animation-play-state	43.0 <br> 3.0 -webkit-	16.0 <br> 5.0 -moz-	9.0 <br> 4.0 -webkit-	12.10 <br> 12.0 -o-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
animation-play-state	2.0 -webkit-	16.0 <br> 5.0 -moz-	9.2 <br> 4.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">наведи — поїду</div>

.box {
    width: 200px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    position: relative;
    animation: mymove 3s infinite;
    animation-play-state: paused;
}

.box:hover {
    animation-play-state: running;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 160px; }
}