CSS transition: плавные анимации при наведении без JavaScript

Поисковый запрос CSS transition чаще всего вводят, когда хотят сделать плавную анимацию при наведении: кнопка должна мягко менять цвет, карточка — подниматься, а меню — появляться не резко, а аккуратно. Хорошая новость: для таких эффектов обычно не нужен JavaScript. Достаточно свойства transition.

Что делает CSS transition

transition описывает не само конечное состояние элемента, а то, как браузер должен перейти от старого значения CSS-свойства к новому. Например, обычная кнопка при наведении сразу меняет фон. С transition это изменение растягивается во времени и выглядит плавно.

.button {
  background: #2563eb;
  color: white;
  transition: background 0.25s ease;
}

.button:hover {
  background: #1d4ed8;
}

Здесь браузер плавно изменит background за 0.25s по кривой ease. Без transition цвет изменился бы мгновенно.

Синтаксис transition

Краткая запись выглядит так:

transition: property duration timing-function delay;

Полная запись через отдельные свойства полезна, когда нужно лучше контролировать эффект:

.card {
  transition-property: transform, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

Пример 1: кнопка с плавным hover-эффектом

Один из самых частых случаев — кнопка, которая меняет фон и немного приподнимается при наведении.

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background 200ms ease, transform 200ms ease;
}

.btn:hover {
  background: #15803d;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

Обратите внимание: мы анимируем transform, а не top или margin. Это важная практика: transform обычно работает быстрее и не заставляет браузер заново пересчитывать расположение соседних элементов.

Пример 2: карточка товара или статьи

Для карточек часто используют сочетание transform и box-shadow. Элемент визуально становится интерактивным, но макет страницы не ломается.

.product-card {
  max-width: 320px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

Такой эффект хорошо подходит для сетки товаров, карточек блога, блоков преимуществ и портфолио. Если хотите системно научиться собирать такие интерфейсы в реальных проектах, полезно разобрать вёрстку сайта с нуля на практике: там легче понять, где анимации действительно улучшают интерфейс, а где только мешают.

Пример 3: плавное появление элемента

Новички часто пытаются анимировать display: none и display: block, но это не работает: display не имеет промежуточных состояний. Вместо этого используйте opacity и при необходимости visibility.

.tooltip {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

В этом примере подсказка не просто появляется, а слегка выезжает снизу. Такой приём выглядит аккуратно и не требует скриптов.

Какие CSS-свойства лучше анимировать

Не все свойства одинаково хорошо подходят для плавных переходов. Для производительности чаще выбирают:

С осторожностью анимируйте width, height, margin, padding, left, top. Они могут вызывать перерасчёт layout, особенно если элементов много.

transition: all — удобно, но не всегда правильно

Иногда пишут так:

.box {
  transition: all 0.3s ease;
}

Это быстро, но в больших проектах может привести к неожиданным эффектам: начнёт плавно меняться то, что вы не планировали анимировать. Лучше явно указывать свойства:

.box {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Не забывайте про :focus

Hover работает для мыши, но пользователи клавиатуры перемещаются по странице через Tab. Поэтому интерактивные элементы стоит оформлять не только через :hover, но и через :focus-visible.

.link {
  color: #2563eb;
  transition: color 180ms ease, outline-color 180ms ease;
}

.link:hover {
  color: #1e40af;
}

.link:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

Уважайте настройки пользователя

Некоторые пользователи отключают лишние анимации в системе. В CSS это можно учесть через медиавыражение prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

Для учебных проектов это может казаться лишним, но в реальной разработке такая деталь показывает заботу о доступности интерфейса.

Типичные ошибки новичков

Итог

CSS transition — базовый, но очень полезный инструмент. Он помогает делать плавные hover-эффекты, аккуратные карточки, подсказки, кнопки и ссылки без JavaScript. Главное — анимировать подходящие свойства, не злоупотреблять transition: all, помнить про доступность и использовать анимации там, где они помогают пользователю, а не отвлекают его.

Источник