Урок 65 із 104
63%
← Назад

Стан анімації в CSS

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

Що таке animation-play-state

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

Властивість має два основні значення: running — анімація виконується, та paused — анімація призупинена.

  • running — анімація відтворюється.
  • paused — анімація призупинена.

Значення running

Значення running запускає або продовжує відтворення анімації. Це значення використовується за замовчуванням.

@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-play-state: running; }

Значення paused

Значення paused призупиняє анімацію на поточному кадрі. Після повернення значення running анімація продовжується з того самого місця.

@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-play-state: paused; }

Зупинка анімації при наведенні

Властивість animation-play-state часто використовують разом із псевдокласом :hover. Наприклад, анімація може постійно виконуватися, а при наведенні курсора призупинятися.

@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } .box:hover { animation-play-state: paused; }

Практичне завдання

Практичне завдання 1

📌 Завдання:
  1. Створіть блок.
  2. Створіть анімацію переміщення блоку.
  3. Зробіть анімацію нескінченною.
  4. Використайте animation-play-state: running.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Створіть @keyframes, підключіть анімацію та задайте animation-play-state: running;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-play-state: running; }

Практичне завдання 2

📌 Завдання:
  1. Створіть блок.
  2. Створіть нескінченну анімацію переміщення.
  3. Зробіть так, щоб анімація була призупинена.
  4. Використайте animation-play-state: paused.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Додайте animation-play-state: paused; до стилів блоку.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-play-state: paused; }

Практичне завдання 3

📌 Завдання:
  1. Створіть блок з нескінченною анімацією.
  2. Зробіть так, щоб анімація працювала у звичайному стані.
  3. При наведенні курсора призупиняйте анімацію.
  4. Після відведення курсора анімація повинна продовжуватися.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

У звичайному стані використайте animation-play-state: running;, а в .box:hover — animation-play-state: paused;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } .box:hover { animation-play-state: paused; }

Практичне завдання 4

📌 Завдання:
  1. Створіть блок.
  2. Створіть нескінченну анімацію зміни розміру.
  3. Зробіть анімацію активною за замовчуванням.
  4. При наведенні курсора призупиняйте її.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Створіть @keyframes із transform: scale(1) та transform: scale(1.3). Використайте animation-play-state у звичайному стані та :hover.

✅ Показати відповідь
@keyframes scaleBox { from { transform: scale(1); } to { transform: scale(1.3); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: scaleBox; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } .box:hover { animation-play-state: paused; }
❗ Важливо:

animation-play-state не змінює саму анімацію, а керує її відтворенням. Значення paused призупиняє анімацію на поточному кадрі, а running дозволяє їй продовжитися.