Продуктивність CSS анімацій: Кращі практики

Створення плавних, продуктивних анімацій є критично важливим для чудового користувацького досвіду. Цей гід охоплює все, що вам потрібно знати про оптимізацію CSS анімацій.

Золоте правило 60fps

Для максимально плавних анімацій потрібно підтримувати 60 кадрів на секунду. Це означає, що кожен кадр має рендеритись менше ніж за 16.67ms.

Властивості для анімації

✅ ДОБРЕ - GPU прискорені

• transform (translate, scale, rotate)
• opacity

Ці властивості обробляються GPU і не викликають перерахунок layout або paint.

.smooth-animation {
  animation: slide 0.3s ease-out;
}
@keyframes slide {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

❌ ПОГАНО - CPU інтенсивні

• width, height
• top, left, right, bottom
• margin, padding
• border-width

Ці властивості викликають перерахунок layout та repaint.

Властивість will-change

Повідомте браузеру що ви плануєте анімувати:

.will-animate {
  will-change: transform, opacity;
}

Важливо: Не зловживайте will-change - це споживає пам'ять!

Апаратне прискорення

Примусове GPU прискорення коли потрібно:

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

Тайминг анімації

Використовуйте відповідні функції пом'якшення:

.natural-motion {
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

Поширені функції пом'якшення:

• ease-in: Повільний старт, швидкий фініш
• ease-out: Швидкий старт, повільний фініш
• ease-in-out: Повільний старт і фініш
• cubic-bezier: Користувацькі криві

Зменште складність анімації

До (Важке):

@keyframes heavy {
  0% {
    width: 100px;
    height: 100px;
    background: red;
  }
  100% {
    width: 200px;
    height: 200px;
    background: blue;
  }
}

Після (Оптимізовано):

@keyframes light {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0.8;
  }
}

Налагодження продуктивності

Використовуйте Chrome DevTools:

Відкрийте DevTools (F12)

Перейдіть на вкладку Performance

Запишіть анімацію

Шукайте:

- Довгі кадри (>16ms) - Layout thrashing - Надмірний paint

requestAnimationFrame

Для JavaScript анімацій використовуйте RAF:

function animate() {
  element.style.transform = translateX(${position}px);
  position += 1;
  if (position < 100) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

Налаштування зменшення руху

Поважайте налаштування користувача:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Поширені помилки

Анімація занадто багатьох елементів - Використовуйте пагінацію або віртуальний скролінг

Складні box-shadows - Використовуйте зображення або SVG замість

Без очищення анімації - Видаляйте анімації коли не видимі

Безкінечні анімації - Ставте на паузу коли поза екраном

Чеклист продуктивності

• ✅ Використовуйте transform та opacity
• ✅ Додавайте will-change обережно
• ✅ Використовуйте відповідне пом'якшення
• ✅ Обмежте одночасні анімації
• ✅ Тестуйте на слабких пристроях
• ✅ Моніторте частоту кадрів
• ✅ Поважайте prefers-reduced-motion

Висновок

Продуктивність - ключ до чудових анімацій. Дотримуйтесь цих практик для створення плавних, захоплюючих анімацій, які покращують користувацький досвід без шкоди продуктивності.

Інструменти:

• Бібліотека CSS анімацій - Попередньо оптимізовані анімації
• Інструменти тестування продуктивності