Скорочена властивість для анімації в CSS

Вивчаємо скорочений запис властивості animation, яка дозволяє записати основні параметри CSS-анімації в одному рядку.

Що таке animation

Властивість animation є скороченим записом для налаштування CSS-анімації. За її допомогою можна в одному рядку вказати назву анімації, її тривалість, затримку та функцію плавності.

Замість того щоб записувати кожну властивість окремо, можна об'єднати їх у властивості animation.

#elem { animation-name: anim; animation-duration: 4s; animation-delay: 5s; animation-timing-function: ease; },

Скорочений запис

У скороченому записі спочатку вказується назва анімації, потім тривалість, функція плавності та затримка.

#elem { animation: anim 4s ease 5s; },

anim — назва анімації (animation-name).
4s — тривалість одного циклу анімації (animation-duration).
ease — функція плавності анімації (animation-timing-function).
5s — затримка перед початком анімації (animation-delay).

❗ Важливо:

Якщо в animation вказано два значення часу, перше зазвичай визначає animation-duration, а друге — animation-delay.

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

📌 Завдання:

Перепишіть наведений код через скорочену властивість animation.
Збережіть усі задані параметри анімації.

#elem { animation-name: anim; animation-duration: 4s; animation-delay: 5s; animation-timing-function: ease; },

💡 Показати підказку

Запишіть назву анімації, тривалість, функцію плавності та затримку через пробіл у властивості animation.

✅ Показати відповідь

#elem { animation: anim 4s ease 5s;}