Що таке анімація в CSS? Як її задати?
Анімація в CSS - це механізм, який дозволяє плавно змінювати значення CSS-властивостей у часі (колір, розмір, позицію, прозорість тощо) без JavaScript.
CSS-анімація задається за допомогою двох частин:
1) Опис кадрів за допомогою @keyframes
css
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}from → початковий стан
to → кінцевий стан (можна й через відсотки: 0%, 50%, 100%)
2) Застосування анімації до елемента
css
.box {
animation: fade 2s ease-in-out forwards;
}Де:
| Властивість | Що задає |
|---|---|
animation-name | ім'я анімації (fade) |
animation-duration | тривалість (2s, 500ms) |
animation-timing-function | крива (наприклад ease, linear, ease-in-out) |
animation-iteration-count | кількість повторів (1, infinite) |
animation-delay | затримка |
animation-direction | напрямок (normal, reverse, alternate) |
animation-fill-mode | поведінка до/після анімації (forwards, backwards, both) |
Підсумок
Анімація в CSS створюється так:
- Описуєш ключові кадри через
@keyframes - Призначаєш анімацію елементу через
animation
Без JS, тільки CSS.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.