Как решать задачу анимации шаг за шагом

Что проверяют

Умеете ли вы превратить «сделайте красиво» в конкретную анимацию с понятной ценой для производительности. Следом обычно спрашивают, как выбрать между CSS и JavaScript и как проверить, что анимация не дёргается.

Как отвечать

Идите по шагам и на каждом называйте решение:

• смысл: что анимация сообщает пользователю: появление элемента, смену состояния, переход между экранами. Сразу фиксируйте длительность и кривую, для интерфейсных переходов обычно от 150 до 300 мс и ease-out на появление;
• инструмент: смена состояния по классу решается через transition, повторяющиеся и многошаговые эффекты через @keyframes. JavaScript нужен, когда анимацию надо прервать, развернуть или связать с жестом и скроллом: Web Animations API (element.animate()), GSAP, в React библиотека Motion. Переходы между состояниями страницы закрывает View Transitions API;
• свойства: анимировать transform и opacity. Их браузер обрабатывает на композиторе, а top, left, width, height запускают перерасчёт раскладки на каждом кадре;
• цикл: если пишете руками, то через requestAnimationFrame, а не setInterval;
• доступность: медиазапрос prefers-reduced-motion, при котором движение заменяется простым проявлением или выключается.

Проверка: вкладка Performance в DevTools, запись с искусственным замедлением CPU. При 60 Гц на кадр есть около 16,7 мс, и длинные задачи в главном потоке сразу видны как пропущенные кадры. Полезно посмотреть и на слабом телефоне, а не только на рабочем ноутбуке.

Где спотыкаются

Пишут transition: all. Анимируется всё подряд, включая свойства, которые меняют раскладку, и появляются неожиданные эффекты при смене темы или размера окна.

Развешивают will-change на десятки элементов «для скорости». Каждый такой элемент получает свой слой и память видеокарты, на телефоне это даёт обратный эффект.

Забывают про исчезновение. В React элемент удаляется из DOM раньше, чем успеет проиграть анимация ухода, и нужен механизм вроде AnimatePresence из Motion или отложенного размонтирования.