Уявіть: ви заходите на сайт преміум-бренду, картинка завантажується, з'являється плавне затінення, а кнопка при наведенні злегка піднімається. Це створює відчуття якості та дорожнечі. Тепер уявіть зворотне: анімації смикаються, елементи стрибають, сайт гальмує — користувач іде за 2 секунди. CSS-анімації — потужний інструмент, але неграмотне їх використання вбиває продуктивність. Ми стикалися з проектами, де проста анімація модального вікна викликала перерахунок layout'а на весь документ, що призводило до LCP 4+ секунди на мобільних пристроях. За 5 років ми оптимізували анімації на 40+ проектах, знизивши Interaction to Next Paint (INP) в середньому на 60%. У цій статті розберемо, як правильно підходити до анімацій на CSS: від вибору властивостей до оптимізації через GPU, і покажемо реальний кейс прискорення hero-секції в 3 рази.
Як CSS-анімації впливають на Core Web Vitals?
Core Web Vitals — метрики, які Google використовує для оцінки користувацького досвіду. Анімації безпосередньо впливають на LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) та INP (Interaction to Next Paint). Неправильно анімовані елементи можуть збільшувати LCP через затримки compositing, викликати CLS при анімації розмірів або погіршувати INP через часті перемалювання. Оптимізовані CSS-анімації, навпаки, допомагають зберегти стабільні 60 FPS і не впливають на ці метрики.
Безпечні властивості для анімації
CSS-анімації виконуються на compositor thread — окремому потоці, що не блокує JavaScript та rendering. Грамотно написані анімації не викликають layout recalculation і працюють у 60 fps навіть на мобільних пристроях. Неграмотні — вбивають продуктивність, викликають jank і дратують користувача.
Анімувати потрібно лише властивості, що не викликають reflow/repaint:
| Властивість | Composite | Безпечно |
|---|---|---|
| transform | Так | Так |
| opacity | Так | Так |
| filter | Частково | Обережно |
| width, height | Ні | Ні, використовуйте scale() |
| top, left | Ні | Ні, використовуйте translate() |
| background-color | Ні | Тільки через transition |
| clip-path | Частково | Так, сучасні браузери |
Правило: переміщення через translate, масштаб через scale, поворот через rotate — ніколи top/left/width/height у @keyframes. Анімація через transform та opacity в 5 разів продуктивніша за анімації layout-властивостей, оскільки не включають reflow та repaint.
Що обрати: CSS transitions чи animations?
CSS transitions — для станів (hover, focus, active). Декларативно, коротко:
.button { background-color: #2563eb; transform: translateY(0); transition: background-color 200ms ease, transform 150ms ease, box-shadow 200ms ease; } .button:hover { background-color: #1d4ed8; transform: translateY(-2px); box-shadow: 0 8px 25px rgb(37 99 235 / 0.4); } CSS animations (@keyframes) — для автономних, зациклених або багатокрокових рухів. Детальніше — на MDN.
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.8; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } .live-indicator::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: currentColor; animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } Як уникнути jank на мобільних пристроях?
Основні причини jank: анімація layout-властивостей, занадто багато одночасно анімованих елементів, відсутність will-change на критичних елементах. Ми використовуємо наступний підхід:
- Всі рухи через transform та opacity.
- Не більше 30 анімованих елементів на сторінці.
- will-change тільки на тих елементах, які анімуються постійно (наприклад, spinner), і прибираємо після завершення.
- Обов'язкове додавання prefers-reduced-motion для accessibility.
Приклад will-change:
.modal-overlay { will-change: opacity; } .modal-overlay.is-visible { will-change: auto; } Accessibility: prefers-reduced-motion
Обов'язково для будь-якого проекту:
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } Intersection Observer + CSS класи
Анімації при появі у viewport — без бібліотек:
const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.15 } ); document.querySelectorAll('[data-animate]').forEach((el) => observer.observe(el)); [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 500ms ease, transform 500ms ease; } [data-animate].is-visible { opacity: 1; transform: translateY(0); } Чому варто уникати JavaScript-бібліотек для анімацій?
CSS-анімації виконуються на композитному потоці, не блокуючи JavaScript. Вони забезпечують стабільні 60 FPS навіть при високих навантаженнях. JavaScript-анімації (наприклад, через requestAnimationFrame) працюють в основному потоці і можуть викликати jank при складних обчисленнях. У тестах ми заміряли: CSS-анімації в 5 разів швидші за JS-анімації на compositor thread. Бібліотеки на кшталт GSAP зручні, але для більшості завдань (entrance, hover, loading) CSS-рішення легші, швидші та не потребують додаткових завантажень.
Що входить у роботу
| Етап | Тривалість | Результат |
|---|---|---|
| Аудит поточних анімацій | 0.5–1 день | Аналіз продуктивності, виявлення проблем |
| Проектування анімаційної системи | 0.5–1 день | Набір @keyframes, стилі, токени анімацій |
| Верстка та оптимізація | від 1 дня | Готові компоненти з анімаціями, will-change, prefers-reduced-motion |
| Тестування на мобільних пристроях | 0.5 дня | Перевірка FPS, LCP, INP у Chrome DevTools |
| Деплой та моніторинг | 0.5 дня | Інтеграція в CI/CD, метрики Core Web Vitals |
Продуктивність: чек-лист
- transform та opacity — єдині властивості у @keyframes для руху.
- will-change тільки на елементах з важкою анімацією, прибирати після завершення.
- animation-fill-mode: both замість дублювання початкового стану.
- Не більше 20–30 одночасно анімованих елементів на сторінці.
- prefers-reduced-motion охоплює всі анімації.
- Тестування в Chrome DevTools → Performance → Rendering → Paint flashing.
Строки
Базові CSS-переходи (hover-стани, поява модалок, fade-ефекти) включаються у вартість базової верстки. Кастомні анімації (skeleton, staggered-списки, hero-анімації, parallax) — від 0.5 до 1 дня залежно від кількості та складності сцен. Зв'яжіться з нами для аудиту анімацій — виявимо проблеми продуктивності. Замовте оптимізацію — отримайте гарантію відсутності jank.