CSS властивості для створення анімацій та плавних перехідних ефектів
Основні CSS пропси для анімацій та переходів
CSS надає два підходи для створення візуальних ефектів:
- Плавні переходи (
transition) — для простих ефектів (при наведенні, фокусі тощо) - Анімації (
@keyframes + animation) — для складних та багатоступеневих ефектів
Перехід — Плавні переходи
Використовується для анімації змін властивостей, коли змінюється стан елемента.
css
.button {
background: blue;
transition: background 0.3s ease;
}
.button:hover {
background: red;
}Основні пропси:
transition-property— яку властивість анімуватиtransition-duration— тривалістьtransition-timing-function— функція розгладженняtransition-delay— затримка перед початком
Анімація — Складні анімації
Для багатоступеневих анімацій з повним контролем.
css
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.element {
animation: slideIn 1s ease-out;
}Основні пропси:
animation-name— назва ключових кадрівanimation-duration— тривалістьanimation-timing-function— розгладженняanimation-delay— затримкаanimation-iteration-count— кількість повторівanimation-direction— напрямок
Порада:
Використовуйте transition для простих ефектів, animation для складних багатоступеневих анімацій.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.