Справочник HTML & CSS

transition

Плавно анимирует изменение свойства от старого значения к новому.

Синтаксис

transition: property duration easing delay;

Значения

Параметр	Тип	Описание
property	ident	Что анимировать: `background`, `transform`, `all`.
duration	time	Как долго: `0.3s`, `200ms`.
easing	keyword	Кривая скорости: `ease`, `linear`, `ease-in-out`.
delay	time	Пауза перед началом: `0.1s`.

Примеры

Плавная смена цвета при наведении:

<style>
  .btn { padding: 8px 16px; background: royalblue; color: white; border: 0; transition: background 0.3s ease; }
  .btn:hover { background: crimson; }
</style>
 
<button class="btn">Hover over me</button>

Несколько свойств через запятую:

<style>
  .card { width: 160px; padding: 16px; background: whitesmoke; transition: transform 0.2s, box-shadow 0.2s; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgb(0 0 0 / 0.2); }
</style>
 
<div class="card">A card that lifts</div>

Примечания

transition задают элементу в обычном состоянии, а не в :hover — тогда изменение плавное в обе стороны. Плавнее всего анимируются transform и opacity. Не каждое свойство можно анимировать: display переключается мгновенно.

См. также

:hover — Срабатывает, пока над элементом находится указатель мыши.
transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.
animation — Запускает на элементе анимацию из `@keyframes`.
@starting-style — Задаёт стили, с которых элемент начинает при первом появлении, чтобы `transition` анимировал его появление.
transition-behavior — Разрешает переходы дискретных свойств вроде `display` и `overlay`, чтобы элемент успел плавно исчезнуть, прежде чем пропасть.

Вопросы и ответы по теме

В учебнике

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

Спасибо, что читаете!