Свойство transition CSS: полное руководство

Практические примеры применения transition в веб-дизайне

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

Интерактивные кнопки и ссылки

Кнопки — главные точки взаимодействия. Их анимация должна быть тактильной и понятной.

В Примере 7 разные свойства кнопки анимируются с разными значениями на различных этапах взаимодействия с ней (подробности описаны в коде под этим примером).

.practical-btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: #5d78ff;
  color: white;
  text-decoration: none;
  border-radius: 50px; /* Округлая форма */
  font-weight: 600;
  border: 2px solid transparent;
  /* Анимируем фон, тень и трансформацию */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 6px rgba(93, 120, 255, 0.2);
}
.practical-btn:hover {
  background-color: #4a63e0;
  transform: translateY(-3px); /* Эффект "поднятия" */
  box-shadow: 0 7px 14px rgba(93, 120, 255, 0.3); /* Усиленная тень */
}
.practical-btn:active {
  transform: translateY(-1px); /* Эффект "нажатия" */
  transition-duration: 0.1s; /* Ускоряем обратную анимацию */
}

Раскрывающиеся меню и выпадающие списки

Резкое появление контента может дезориентировать. В Примере 8 убедительно показано, что плавное раскрытие или выезд меню выглядит куда элегантнее.

<nav class="dropdown">
  <button class="dropdown-toggle">Меню ▼</button>
  <ul class="dropdown-menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 10px 0;
  /* Изначально скрыто: прозрачность 0 и сдвиг вверх */
  opacity: 0;
  visibility: hidden; /* Важно: убираем из потока, чтобы нельзя было навести */
  transform: translateY(-10px);
  /* Анимируем три свойства */
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible; /* Возвращаем видимость */
  transform: translateY(0); /* "Въезд" в нормальную позицию */
}
.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s;
}
.dropdown-menu a:hover {
  background-color: #f5f7fa;
}

Галереи и карточки товаров

Эффекты при наведении на карточку — классический способ повысить вовлеченность, что прекрасно продемонстрировано в Примере 9 ниже.

Пример 9

Простые эффекты повышают интерес и желание взаимодействовать!

.product-card {
  width: 300px;
  border-radius: 12px;
  overflow: hidden; /* Чтобы изображение не выходило за скругленные углы */
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.product-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 30px rgba(0,0,0,0.15);
}
.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover img {
  transform: scale(1.05); /* Легкий зум изображения */
}
.product-info {
  padding: 20px;
}

Индикация загрузки (лоадеры)

В Примере 10 показано, что простые лоадеры можно создать, анимируя transform или border.

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  /* Бесконечная анимация через transition невозможна, но мы можем имитировать плавность вращения, если оно запускается по событию. Для бесконечной анимации лучше @keyframes. */
  animation: spin 1s linear infinite; /* Здесь уже анимация, а не transition */
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Но transition отлично подойдет для плавного появления/исчезания лоадера */
.loader-container {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.loader-container.active {
  opacity: 1;
}

Переходы для состояния :focus и :active

Не забывайте о доступности! Пользователи, которые осуществляют навигацию по сайту с помощью клавиатуры (Tab), должны видеть, какой элемент в фокусе. Стандартный браузерный outline можно стилизовать и анимировать. Смотри Пример 11.

.accessible-input {
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  outline: none; /* Убираем стандартный контур */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.accessible-input:focus {
  border-color: #5d78ff;
  /* Создаем свой мягкий glow-эффект вместо outline */
  box-shadow: 0 0 0 3px rgba(93, 120, 255, 0.2);
}
.accessible-btn:active {
  transform: scale(0.97);
  transition-duration: 0.05s; /* Очень быстрая анимация нажатия */
}

Совместимость transition с CSS Transform для максимальной производительности

Для создания перемещений, масштабирований и вращений всегда предпочтительнее использовать свойство transform, а не top/left или width/height. Почему?

Браузерный рендеринг состоит из нескольких этапов: Layout (перерасчет геометрии), Paint (отрисовка), Composite (композитинг). Изменение свойств вроде width, margin приводит к срабатыванию этапов Layout и Paint, что ресурсоемко.

Свойства transform и opacity в большинстве случаев обрабатываются на этапе Composite, который использует GPU и происходит максимально быстро. Это гарантирует плавность анимации (60 FPS) даже при высокой нагрузке.

/* Плохо для производительности при анимации */
.slow-box:hover {
  width: 400px; /* Вызовет Layout и Paint */
  margin-left: 50px; /* Вызовет Layout и Paint */
}
/* Отлично для производительности */
.fast-box {
  transition: transform 0.3s ease;
}
.fast-box:hover {
  /* Анимация трансформации использует GPU */
  transform: translateX(50px) scale(1.1);
}

Создание пользовательских кривых с cubic-bezier()

Иногда встроенных функций (ease, ease-in-out) недостаточно. Для полного контроля над темпом анимации используется функция cubic-bezier(x1, y1, x2, y2). Она описывает кривую Безье по четырем контрольным точкам (P1 и P2).

• P0: (0, 0) — начало анимации.
• P1: (x1, y1) — первая контрольная точка.
• P2: (x2, y2) — вторая контрольная точка.
• P3: (1, 1) — конец анимации.

Не бойтесь использовать визуальные редакторы:

1. cubic-bezier.com
2. Инструменты разработчика в браузере (Chrome DevTools) позволяют редактировать кривую прямо в CSS-панели.

.bouncy-btn {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bouncy-btn:hover {
  transform: scale(1.2); /* Кнопка будет "пружинить" при увеличении */
}
.elastic-input {
  transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.elastic-input:focus {
  transform: translateX(10px);
}

Обратная анимация и тонкости поведения

По умолчанию, свойство transition css применяется и к переходу в исходное состояние. Если вы навели курсор мыши на элемент, то анимация длится 0.3s, и когда убрали курсор, возврат также длится 0.3s с той же timing-function.

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

.tooltip {
  opacity: 0;
  /* Анимация ПОЯВЛЕНИЯ: длительная, с задержкой */
  transition: opacity 0.8s ease 0.3s;
}
.element:hover .tooltip {
  opacity: 1;
  /* Анимация ИСЧЕЗНОВЕНИЯ: быстрая, без задержки */
  transition: opacity 0.2s ease;
}

В примере выше: при наведении срабатывает правило для .element:hover .tooltip (исчезновение за 0.2s), а при уходе курсора — правило для .tooltip (появление за 0.8s с задержкой). Это создает сложное, контролируемое поведение.

Распространенные ошибки и как их избежать

1. Анимация свойства auto или none. Переходы не работают со значениями height: auto; или display: none;. Вместо display: none используйте opacity: 0; visibility: hidden;. Вместо анимации height: auto — анимируйте max-height от 0 к заведомо большому значению (например, 1000px), или используйте transform: scaleY().
2. Слишком много одновременных переходов. Анимация десятков свойств (особенно с transition: all) может привести к «захватыванию» основного потока браузера и подтормаживаниям. Анимируйте только необходимые свойства, предпочтительно transform и opacity.
3. Игнорирование шагающих анимаций (steps()). Функция steps(n) разбивает анимацию на n резких шагов. Идеально для создания sprite-анимации, тикающих часов, эффекта пишущей машинки.

.typewriter {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

Забывают про will-change. Для сложных, ресурсоемких анимаций можно подсказать браузеру, какое свойство будет изменяться, чтобы он заранее подготовил оптимизации: will-change: transform;. Используйте с осторожностью и только в случае реальных проблем с производительностью, так как это может заставить браузер выделять лишние ресурсы.

Ниже все примеры из этой статьи собранные в одном месте!

See the Pen transition css by inteltone (@inteltone) on CodePen.