Вспомните урок про :hover: при наведении кнопка мгновенно меняла цвет. Работает, но выглядит грубовато — изменение происходит рывком. Профессиональные интерфейсы меняются плавно: цвет перетекает за доли секунды, тень нарастает мягко, элемент аккуратно приподнимается. Это ощущение «дороговизны» и отзывчивости создаёт свойство transition — оно превращает резкие изменения стилей в плавные переходы. Один-два свойства CSS — и интерфейс из «щёлкающего» становится живым и приятным.

После этого урока вы сможете делать любые изменения стиля плавными: переходы цвета, размера, тени при наведении, фокусе или нажатии будут происходить мягко, а не мгновенно.

Что уже умеем / что добавим

Вы умеете менять вид элемента по состоянию (:hover, :focus) и украшать его псевдоэлементами. Но пока все изменения происходят мгновенно. Теперь добавим плавность: свяжем состояния переходами, чтобы стили менялись не рывком, а за заданное время. В сквозном проекте мы сделаем отклик кнопок и карточек сайта компании плавным и приятным.

Что вы узнаете в рамках статьи

• Что делает свойство transition и к чему его применяют.
• Как задавать, какие свойства анимировать и за какое время.
• Что такое функция тайминга и как она влияет на характер движения.
• Как добавлять задержку и переходить сразу несколько свойств.

Ключевые термины

• transition — свойство, задающее плавный переход между значениями стиля.
• transition-property — какое свойство анимировать (или all).
• transition-duration — длительность перехода (в секундах или миллисекундах).
• transition-timing-function — функция тайминга, задающая характер ускорения.
• transition-delay — задержка перед началом перехода.

Как работает transition

transition задают элементу в его обычном состоянии, а не в :hover. Оно описывает: «если это свойство изменится — меняй его плавно, а не мгновенно». Затем, когда какое-то состояние (например, наведение) меняет значение стиля, браузер проигрывает переход:

.btn {
  background: #2d6cdf;
  transition: background 0.3s;
}

.btn:hover {
  background: #1e4fa3;
}

Теперь при наведении цвет кнопки не переключается рывком, а плавно перетекает из светлого в тёмный за 0,3 секунды. И, что важно, при уходе мыши он так же плавно возвращается обратно — переход работает в обе стороны автоматически. Ключевая идея: конечные значения задают состояния (:hover), а плавность между ними — transition в базовом правиле.

Что и как долго: property и duration

У перехода есть две главные части: какое свойство анимировать и за какое время. В краткой записи они идут по порядку — сначала свойство, потом длительность:

.card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

Здесь плавно меняется только тень (box-shadow) за 0,25 секунды. Длительность задают в секундах (0.3s) или миллисекундах (300ms) — это одно и то же. Хорошие переходы обычно короткие: 0,15–0,3 секунды для наведения. Слишком долгие (например, целую секунду) раздражают — интерфейс начинает казаться медлительным. Если хочется анимировать сразу несколько свойств, о них — чуть ниже.

Характер движения: функция тайминга

Функция тайминга задаёт, как распределяется скорость внутри перехода: начинается ли он резко и замедляется, или наоборот. Это третье значение в записи transition:

.btn {
  transition: background 0.3s ease;
}

Значение ease (по умолчанию) означает мягкий старт и мягкое торможение — самый естественный вариант, который подходит для большинства случаев. Есть и другие: linear — равномерное движение без ускорений (подходит для непрерывных, «механических» анимаций), ease-in — медленный старт, ease-out — медленное завершение. Для наведений чаще всего оставляют ease или ease-out: они выглядят живо и не механически. Разница тонкая, но именно она отличает аккуратную анимацию от «дешёвой».

Несколько свойств и задержка

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

.btn {
  background: #2d6cdf;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

Оба свойства будут переходить плавно и одновременно. Можно указать и all вместо имени свойства — тогда анимируются все изменяющиеся свойства, но это менее предсказуемо, поэтому лучше перечислять нужные явно. Наконец, четвёртое значение — задержка (transition-delay): transition: background 0.3s ease 0.1s начнёт переход через 0,1 секунды после изменения. Задержки полезны для последовательных эффектов, но в простых наведениях их обычно не используют.

Применяем в проекте

Сделаем отклик кнопок и карточек сайта компании плавным. Кнопка будет мягко менять цвет, а карточка — плавно приподнимать тень при наведении. Так интерфейс станет заметно приятнее без единой новой строки в HTML.

.btn {
  background: #2d6cdf;
  color: white;
  transition: background 0.25s ease;
}

.btn:hover {
  background: #1e4fa3;
}

.card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

Наведите мышь на кнопку — цвет мягко потемнеет и так же мягко вернётся, когда курсор уйдёт. Наведите на карточку — тень плавно углубится, будто карточка приподнялась. Мы задали конечные значения в :hover, а плавность — в transition, и резкие переключения превратились в приятную анимацию. Интерфейс стал ощущаться современным и качественным.

Частые ошибки

• transition в состоянии :hover.
  Переход задают в базовом правиле, иначе плавным будет только вход, а возврат — рывком.
• Слишком долгие переходы.
  Секунда и больше делают интерфейс медлительным; для наведений держитесь 0,15–0,3 секунды.
• Забыть единицу времени.
  transition: background 0.3 без s не сработает; длительность пишут с s или ms.
• all без нужды.
  Переход all анимирует лишнее и может тормозить; перечисляйте конкретные свойства.

Итоги

Отличная работа — вы научились делать интерфейс плавным! Теперь вы понимаете, как transition превращает резкие изменения стиля в мягкие переходы, умеете задавать анимируемое свойство и длительность, выбирать функцию тайминга для нужного характера движения и переходить сразу несколько свойств. В сквозном проекте кнопки и карточки сайта компании стали откликаться плавно и приятно — небольшая деталь, которая сразу поднимает качество.

Замечательный прогресс — на этом мы завершили первый раздел курса! Вы освоили псевдоклассы, псевдоэлементы и переходы. В следующем уроке начнётся самое зрелищное: настоящие анимации на @keyframes, которые двигаются сами, без всякого наведения.