Что такое анимации в CSS
Что проверяют
Различаете ли вы переход и покадровую анимацию и знаете ли, какие свойства анимировать дёшево.
Как отвечать
Механизмов два.
transition описывает плавный переход между двумя состояниями при изменении свойства. Нужно событие, меняющее стиль: наведение, класс, изменение состояния в коде.
.button { background: #444; transition: background 200ms ease-in-out; }
.button:hover { background: #666; }animation с @keyframes задаёт последовательность кадров и не требует события: работает сама, может повторяться и идти в обратную сторону.
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
.badge { animation: pulse 1.5s ease-in-out infinite; }Управляющие свойства: длительность, функция сглаживания (включая cubic-bezier и steps для покадровой), задержка, число повторов, направление, animation-fill-mode (сохранять ли конечное состояние) и animation-play-state.
Главное про производительность, за это обычно и спрашивают: анимируйте transform и opacity. Они обрабатываются на этапе композиции, выносятся на отдельный слой и не вызывают ни пересчёт разметки, ни перерисовку. Анимация width, height, top, left или margin заставляет браузер пересчитывать разметку на каждом кадре, и на слабом устройстве это видно как рывки. Сдвиг делают через translate, а не через left.
Ещё два момента, которые отличают хороший ответ:
prefers-reduced-motion: у пользователя может быть включено уменьшение анимации в системе, и это стоит уважать, иначе интерфейс вызывает у части людей физический дискомфорт;will-changeподсказывает браузеру заранее создать слой, но применять его ко всему подряд вредно: каждый слой стоит памяти.
Преимущество перед анимацией на JavaScript в том, что композиция идёт в отдельном потоке и не встаёт вместе с занятым основным.
Где спотыкаются
Анимируют геометрию вместо transform.
Не задают animation-fill-mode и видят скачок в конце.
Ставят will-change глобально.
Не учитывают системную настройку уменьшения анимации.