Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим анімація відрізняється від переходу (transition)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Transition** - плавна зміна значення між двома станами, яка запускається подією (наприклад, `hover`) і керується властивістю `transition`. **Animation** - повноцінна анімація з багатьма проміжними кадрами, яка керується `@keyframes` + `animation` і може запускатися сама по собі, без події. **Ключове:** transition - для простої зміни між двома станами, animation - для складних, циклічних, багатоетапних ефектів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Різниця по суті:** | 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** - для складних, циклічних і багатоетапних анімаційних ефектів.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.