CSS-анимация или JavaScript
Вопрос
Когда выберешь CSS-переходы и анимации, а когда анимацию на JavaScript?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
CSS: реакция на состояние (hover, класс, фокус) и простые зацикленные эффекты
CSS-анимации `transform`/`opacity` могут идти на потоке композитора
JS: анимация зависит от данных или ввода в реальном времени (перетаскивание, физика, скролл)
JS: нужно управлять (пауза, реверс, последовательности) - Web Animations API
Покадровый JS только через `requestAnimationFrame`
Что могут спросить следом
- Как остановить CSS-анимацию из кода?
- Как узнать, что CSS-переход закончился?
Разбор
По умолчанию выбираю CSS: переходы для смены состояния вроде hover или открытого меню и @keyframes для лоадеров и пульсаций. Это декларативно, а анимации transform и opacity браузер может исполнять на потоке композитора, даже если главный поток занят. JavaScript беру, когда движение зависит от живых данных: перетаскивание, инерция, привязка к позиции скролла, физика пружин. Если нужно управлять анимацией, ставить на паузу, разворачивать, выстраивать цепочки, удобен Web Animations API: el.animate() даёт объект с pause, reverse и промисом finished. Покадровые расчёты делаю в requestAnimationFrame, чтобы попадать в кадры экрана.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.