Как сделать плавный переход

Короткий ответ

transition указывает, какое свойство менять плавно и за сколько:

<style>
  .box { width: 80px; padding: 12px; background: tomato; color: white; transition: width 0.4s; }
  .box:hover { width: 220px; }
</style>
 
<div class="box">Hover</div>

Несколько свойств и плавность

Свойства перечисляют через запятую. Третье значение — функция плавности: ease-in-out разгоняется и тормозит, linear идёт равномерно, а cubic-bezier() задаёт свою кривую:

<style>
  .chip { display: inline-block; padding: 8px 14px; border-radius: 20px; background: lavender;
    transition: background-color 0.3s ease-in-out, transform 0.3s cubic-bezier(0.3, 1.6, 0.6, 1); }
  .chip:hover { background: plum; transform: translateY(-4px); }
</style>
 
<span class="chip">Bouncy chip</span>

Задержка

Четвёртое значение — задержка перед началом. Например, transition: opacity 0.2s ease 0.5s начнёт меняться через полсекунды — так подсказка не мигает, если курсор пронёсся мимо.

Что лучше анимировать

transform и opacity браузер анимирует почти без нагрузки. Анимация width, height, top или margin заставляет пересчитывать раскладку страницы и на слабых телефонах может дёргаться.

Частая ошибка

transition: all кажется удобным, но анимирует вообще всё, что меняется, — в том числе то, что вы не собирались анимировать, например цвет при смене темы. Перечисляйте нужные свойства явно. И помните: display и height: auto обычным transition плавно не меняются.