Transition — это, пожалуй, самый доступный способ добавить сайту немного плавности без единой строчки JavaScript. Вместо того чтобы свойство менялось мгновенно, скачком, оно плавно перетекает от старого значения к новому за указанное время, и это заметно меняет ощущение от интерфейса.
Классический пример — кнопка, которая при наведении меняет цвет фона. Без transition цвет переключится мгновенно, что выглядит немного резко. С transition background-color и временем в пару десятых секунды переход становится мягким, и интерфейс воспринимается более отзывчивым и живым.
У transition четыре основных параметра: какое свойство анимировать, сколько времени это займёт, какая функция плавности будет использована и есть ли задержка перед началом. Указывать конкретное свойство вместо all — хорошая привычка, потому что all заставляет браузер отслеживать изменения вообще всех свойств, что не бесплатно с точки зрения производительности.
Функция плавности, timing-function, определяет, как меняется скорость на протяжении анимации. Ease начинает и заканчивает медленнее, чем идёт в середине, что обычно выглядит естественнее строгого linear, где скорость постоянна на всём протяжении перехода.
Transition реагирует на любое изменение значения свойства, откуда бы оно ни пришло — по псевдоклассу hover, по добавлению класса через JavaScript или даже по изменению размера окна, если свойство от него зависит. Это делает инструмент удобным и для чисто визуальных эффектов, и для более сложной интерактивности.
Стоит анимировать не любые свойства подряд — transform и opacity браузер умеет обрабатывать особенно эффективно, а вот анимация width или height иногда заставляет браузер пересчитывать раскладку всей страницы на каждом кадре, что может привести к подтормаживанию на слабых устройствах.
Подробное описание всех параметров transition и примеры разных функций плавности собраны в статье про transition на MDN.
