Сравни способы реализации Web-анимации и объясни, когда выбирать каждый вариант.

Способы веб-анимации: CSS transitions, CSS `@keyframes` animations, `requestAnimationFrame`, Web Animations API, библиотеки (Framer Motion, GSAP). Выбор — по сложности и контролю.

Способы

CSS transitions

Плавный переход между состояниями:

.box { transition: transform 0.3s; }
.box:hover { transform: scale(1.1); }

• Когда: простые переходы (hover, состояния).

CSS animations (@keyframes)

Многошаговые/циклические анимации:

@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; }

• Когда: циклические (спиннеры), keyframe-анимации.

requestAnimationFrame

Императивный контроль, синхронно с кадрами:

function animate(t) {
  el.style.transform = `translateX(${t/10}px)`;
  requestAnimationFrame(animate);
}

• Когда: сложные императивные анимации, canvas, зависящие от логики.

Web Animations API

JS-управление анимациями:

el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 });

• Когда: программные анимации с контролем (play/pause).

Библиотеки

• Framer Motion — декларативные анимации в React.
• GSAP — мощные сложные анимации/таймлайны.
• React Spring — физически-реалистичные.

• Когда: сложные интерактивные анимации, оркестрация.

Производительность

Анимировать transform/opacity (GPU, composite, без reflow). Уважать prefers-reduced-motion.

Как выбирать

• Простые переходы → CSS transitions.
• Циклические/keyframe → CSS animations.
• Императивный контроль → rAF/WAAPI.
• Сложные в React → Framer Motion/GSAP.

Коротко для собеседования

Веб-анимация: CSS transitions (простые переходы, hover), CSS @keyframes (циклические, спиннеры), requestAnimationFrame (императивный контроль, canvas), Web Animations API (программные с play/pause), библиотеки Framer Motion/GSAP (сложные в React). Анимировать transform/opacity (GPU). Выбор по сложности и контролю.