Что такое свойство transition в CSS и как работает значение all

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

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

Как отвечать

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

Значение all означает наблюдение за всеми анимируемыми свойствами сразу. В прототипе это экономит строку, в бою даёт три эффекта: анимируется то, чего не планировали (смена темы, добавление класса с другой раскладкой), браузер делает лишнюю работу при каждом пересчёте стилей, и событие transitionend приходит пачкой, по разу на свойство. Поэтому в продакшене перечисляют свойства явно.

Что ещё стоит назвать: дёшево анимируются transform и opacity, их обрабатывает композитор, а width, height и смещения через top заставляют пересчитывать раскладку на каждом кадре. Дискретные свойства вроде display участвуют в переходе только с transition-behavior: allow-discrete. И анимацию стоит глушить под prefers-reduced-motion.

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

Пишут transition: all на универсальном селекторе. Дальше любое изменение класса тянет за собой десятки переходов, страница мажется при загрузке шрифтов и подтормаживает на слабых устройствах, а искать причину приходится по всему проекту.

Ждут перехода от значения auto. Высота с auto по умолчанию не интерполируется, поэтому раскрытие блока делают через max-height, через строки грид-раскладки или через включение интерполяции размеров в браузерах, которые это уже поддерживают.

Объявляют переход внутри :hover, а не на базовом состоянии. Наведение анимируется, а возврат происходит мгновенно, потому что в обычном состоянии правила перехода уже нет. Рядом живёт другая путаница: переход требует смены значения, а самостоятельная анимация с повторами и промежуточными кадрами это @keyframes.