Три инструмента: CSS, Web Animations API, GSAP

Для анимации в браузере есть три основных пути.

  • CSS (transition, @keyframes) - hover, появление и простые эффекты. Кода мало, браузер оптимизирует сам.
  • Web Animations API (element.animate()) - возможности CSS, но с управлением из JS: pause(), reverse(), finished.
  • GSAP - сложные последовательности, timeline, ScrollTrigger, точный контроль, одинаковое поведение в разных браузерах.

Чаще всего GSAP не нужен. Для hover-эффекта кнопки хватит CSS; подключайте библиотеку, когда нужны последовательности и сцены на скролле.

ИнструментСильная сторонаОграничение
CSSПросто, без кода, оптимизирует браузерСложно строить последовательности и управлять
animate()Управление из JS, finished, reverseНет timeline и сцен на скролле
GSAPtimeline, ScrollTrigger, stagger, точностьЛишняя зависимость, размер бандла

CSS-анимации

transition - переход между двумя состояниями (например, hover). @keyframes описывает многошаговую анимацию и подключается через animation. В конце кода ниже есть блок prefers-reduced-motion: его полезно написать один раз для всего проекта.

css
.card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero {
  animation: fade-up 0.6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

💡 Значение both у animation удерживает первый кадр до старта и последний после окончания.

Web Animations API

element.animate(keyframes, options) работает как CSS-анимация, но возвращает объект Animation. Им можно остановить анимацию, изменить скорость, пустить назад и дождаться конца через промис finished.

javascript
const box = document.querySelector('.box');