Чим анімація відрізняється від переходу (transition)?
Різниця по суті:
| Transition (перехід) | Animation (анімація) |
|---|---|
| Працює тільки між двома станами | Може мати багато проміжних кадрів |
| Запускається за подією (наприклад, hover, focus) | Може запускатися сама по собі, без події |
Керується властивістю transition | Керується @keyframes + animation |
| Проста й короткочасна | Складна, циклічна, багатоетапна |
Коли використовувати transition
Коли потрібно плавно змінити один стан на інший, наприклад:
- наведення (
hover) - фокус (
focus) - відкриття/закриття
- зміна кольору, розміру, прозорості
css
.box {
transition: opacity 0.3s;
}
.box:hover {
opacity: 0.5;
}Коли використовувати animation
Коли потрібна повноцінна анімація, наприклад:
- нескінченні ефекти (мигання, обертання)
- складні рухи по етапах
- анімація без взаємодії з користувачем
- циклічні повтори
css
@keyframes spin {
to { transform: rotate(360deg); }
}
.box {
animation: spin 2s linear infinite;
}Підсумок в одному реченні
Transition - для простої плавної зміни між двома станами. Animation - для складних, циклічних і багатоетапних анімаційних ефектів.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.