Вступ для початківців
Анімація
в CSS
Як змусити елементи вебсторінки рухатися. Починаємо з нуля.
© 2026 Андрій Когут
Основи
Анімація змінює значення поступово
Без анімації
Положення й колір змінюються миттєво, одним стрибком.
З анімацією
Та сама зміна, розтягнута на 0,8 секунди.
Основи
Два способи оживити елемент
transition
Перехід: плавно змінює стиль з одного значення на інше. Його щось має запустити: наведення чи клік.
@keyframes
Ключові кадри: послідовність кроків, описана наперед. Запускається сама й може повторюватися без кінця.
Складники
Перехід веде з точки А в точку Б
.button {
background: #4FA8FF;
transition: transform 300ms ease,
background 300ms ease;
}
.button:hover {
background: #FF8A3D;
transform: scale(1.1);
}
Читаємо: яка властивість, як довго, з якою плавністю. :hover — курсор над елементом.
Складники
Ключові кадри — це розклад руху
@keyframes bounce {
0%, 100% { transform: translateY(0) }
50% { transform: translateY(-160px) }
}
.ball {
animation: bounce 1s ease-in-out
infinite;
}
translateY(-160px) — це на 160 пікселів угору. Проміжні кадри браузер домальовує сам.
Складники
Плавність надає рухові характеру
Плавність (easing) — це темп руху: де він пришвидшується, а де сповільнюється. Та сама відстань, той самий час, інше відчуття.
Складники
Одна анімація, різні затримки
.bar {
animation: wave 1.2s ease-in-out
infinite;
}
.bar-2 { animation-delay: 80ms; }
.bar-3 { animation-delay: 160ms; }
.bar-4 { animation-delay: 240ms; }
Усі смужки відтворюють ту саму анімацію. Кожна наступна стартує на 80 мілісекунд пізніше.
Приклади
Чотири індикатори завантаження
Кільце
rotate(360deg), linear
Крапки
scale + затримки
Каркас
background-position
Пульс
scale + opacity, ease-out
Приклади
Три складніші ефекти
3D-куб
transform-style: preserve-3d
Рух уздовж кривої
offset-path + offset-distance
Сяйлива рамка
@property + conic-gradient
Перед релізом
Не всім рух на користь
@media (prefers-reduced-motion: reduce) {
.badge {
animation: none;
}
}
Декому від руху на екрані паморочиться в голові, тож у системах є налаштування «Зменшення руху». Це правило діє, лише коли його ввімкнено.
Згасання й зміну кольору можна лишити. Великі переміщення й нескінченні цикли краще прибрати.
