Как сделать плавный переход через CSS transition?

transition делает изменение свойства плавным во времени вместо мгновенного. Пишется он на исходном состоянии элемента, а не на :hover.

.btn {
  background: #4f46e5;
  transition: background 0.3s ease;
}
.btn:hover {
  background: #4338ca; /* плавно перетечёт за 0.3s */
}

Синтаксис: свойство — длительность — функция времени — задержка.

• background — что анимировать (или all — всё, но это менее производительно);
• 0.3s — сколько длится;
• ease — характер (linear, ease-in, ease-out, ease-in-out);
• (необязательно) задержка перед стартом.

Можно перечислить несколько переходов через запятую:

transition: background 0.3s ease, transform 0.2s ease;

Важные моменты:

• анимируются не все свойства: плавно меняются числовые (цвет, размеры, opacity, transform). А вот display: none ↔ block переключается мгновенно — для появления/скрытия анимируйте opacity и visibility.
• ради плавности (60 fps) предпочитайте transform и opacity — они не вызывают перерасчёт раскладки, в отличие от анимации width/top.

Частая ошибка — повесить transition на :hover. Тогда «вход» плавный, а «выход» резкий. Ставьте на базовый селектор.