Расскажите про опыт работы с нативными CSS анимациями, например с keyframes

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

Понимаете ли вы, чем анимация отличается от перехода, и знаете ли цену каждого анимируемого свойства. Вопрос простой на входе, но быстро уходит в производительность и доступность, и там видно реальный опыт.

Как отвечать

Сначала разграничьте инструменты: transition анимирует смену состояния и ему нужен повод (наведение, класс), а @keyframes вместе с animation описывает сценарий, который идёт сам, может повторяться и иметь промежуточные кадры.

Назовите свойства, которыми управляете: animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode (без него элемент прыгает в исходное состояние после конца).

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.toast { animation: fade-in 200ms ease-out both; }

Дальше про цену. Дёшево анимируются transform и opacity: они обрабатываются на этапе композиции и не требуют пересчёта раскладки. width, height, top, margin запускают перерасчёт геометрии на каждом кадре, box-shadow и filter заставляют перерисовывать область. will-change ставится точечно и ненадолго.

Закончите доступностью: prefers-reduced-motion обязателен, при включённой настройке анимации сокращаются или отключаются. И скажите, где переходили на Web Animations API: когда параметры считаются в рантайме или нужно управлять проигрыванием.

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

Говорят, что CSS-анимации всегда идут на видеокарте. В композитор попадают только отдельные свойства, и анимация ширины блока останется дорогой, как её ни объявляй.

Второе: забывают про настройку уменьшенного движения. Для части пользователей крутящиеся и уезжающие элементы это не украшение, а причина закрыть вкладку, и на собеседовании это ждут услышать без подсказки.

Третье: вешают бесконечную анимацию на видный элемент и оставляют её навсегда. Она продолжает тратить кадры и за пределами экрана, а will-change на десятках элементов создаёт лишние слои и съедает память.