Переходы и эффекты наведения

Переход позволяет плавно изменять свойство с течением времени, а не мгновенно.

selector {
  transition: property duration timing-function delay;
}

• property: Свойство CSS, для которого вы хотите задать переход (например, background-color, width, opacity).
• duration:Время, необходимое для завершения перехода (например, 1s — 1 секунда).

• timing-function: Как происходит переход (например, linear, ease, ease-in).
• delay: Сколько времени ждать перед началом перехода (необязательно).

Например:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Когда вы наводите курсор на кнопку, её цвет background изменится с green на blue за 0.3 секунды.