> Что выбрать для анимации: CSS или JavaScript библиотеку и почему (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: MTS

Стек: JavaScript

> Пример ответа

Короткий ответ

Выбор зависит от типа анимации. Для простых переходов состояния, hover-эффектов и декларативных сценариев - CSS, так как он работает нативно, не блокирует main thread и требует меньше кода. Для сложных, управляемых анимаций с динамикой, синхронизацией, физикой или анимацией по данным - JavaScript-библиотеки (GSAP, Framer Motion, Anime.js). Ключевой критерий: если анимация зависит от пользовательского ввода, данных или требует timeline-контроля - JS, иначе - CSS.

Подробное объяснение

CSS-анимации используют compositor thread для transform и opacity, что даёт 60fps без нагрузки на JavaScript. Они идеальны для:

переходов между состояниями (hover, focus, visibility)
простых keyframe-анимаций с фиксированной длительностью
анимаций, которые запускаются при монтировании/изменении класса

Ограничения CSS:

нет доступа к промежуточным значениям в рантайме
сложно строить цепочки с условиями или паузами
нет встроенной поддержки физики, spring-эффектов или инерции
синхронизация нескольких элементов требует ручного управления через задержки

JavaScript-библиотеки дают:

полный контроль над timeline, play/pause/reverse/seek
интерполяцию любых свойств (не только transform/opacity)
работу с SVG, canvas, WebGL
плагины для scroll, drag, morph, split-text
возможность анимировать на основе данных (data-driven)

Trade-off: JS-анимации работают на main thread, поэтому при тяжёлых вычислениях могут проседать. Современные библиотеки (GSAP, Framer Motion) оптимизируют через rAF и compositor, но всё равно требуют больше кода и памяти.

Практическое правило: если анимация - часть UI-паттерна (аккордеон, модалка, тултип) - CSS. Если это интерактивная история, onboarding, анимация графиков или сложный micro-interaction - JS.

На практике

Для senior-позиции важно показать понимание не только выбора, но и компромиссов. Например:

CSS-переходы можно ускорить через will-change и анимацию только transform/opacity
для сложных цепочек в CSS используют animation-timeline (но поддержка ограничена)
GSAP удобен для timeline-анимаций с position параметрами
Framer Motion даёт декларативный API для React и встроенную поддержку AnimatePresence
при выборе библиотеки оценивают bundle size, поддержку SSR, доступность (prefers-reduced-motion)

Также стоит упомянуть гибридный подход: CSS для базовых состояний, JS для управления запуском (например, добавление класса через IntersectionObserver) - это снижает нагрузку и сохраняет контроль.

Пример кода

CSS
/* CSS: hover-эффект - оптимально */
.button {
  transition: transform 0.2s ease;
}
.button:hover {
  transform: scale(1.05);
}

JAVASCRIPT
// JS: анимация по данным - оптимально с GSAP
import gsap from 'gsap';

function animateScore(newValue) {
  const obj = { value: 0 };
  gsap.to(obj, {
    value: newValue,
    duration: 1,
    onUpdate: () => {
      scoreEl.textContent = Math.round(obj.value);
    },
  });
}

Как отвечать на собеседовании

Начните с чёткого критерия выбора, затем приведите 2-3 примера из практики. Покажите, что знаете ограничения обоих подходов. Упомяните производительность: CSS работает на compositor, JS - на main thread. Если спросят про конкретную библиотеку - сравните GSAP и Framer Motion по сценариям. Не уходите в абстракции, привяжите ответ к реальным задачам: анимация модалки - CSS, анимация прогресс-бара с данными - JS.

Что проверяет интервьюер

понимание принципов работы браузера (compositor, main thread)
умение оценивать trade-off между простотой и контролем
знание современных инструментов и их ограничений
способность принимать решение под конкретную задачу, а не по принципу "всегда CSS" или "всегда JS"
понимание доступности (prefers-reduced-motion) и производительности