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