Исполняемые доки CSS: Transition в CSS

Q: В каком порядке идут значения в сокращенной записи transition?

transition: property duration timing-function delay;, например transition: opacity 0.3s ease-in 0.1s;. Строгое правило одно: первое значение времени это длительность, второе задержка. Несколько переходов разделяются запятыми.

Q: Почему не работает transition в CSS?

Частые причины: transition есть только в правиле :hover (поэтому анимация есть при наведении, а обратно стиль возвращается скачком), свойство нельзя анимировать (display или height до auto), у длительности нет единицы (0.3 вместо 0.3s) или значение меняется в тот же момент, когда элемент добавляется на страницу.

Q: Можно ли анимировать переход к height: auto?

Обычным переходом height не во всех браузерах: для интерполяции к auto нужно новое свойство interpolate-size, которое пока поддерживается не везде. Частые обходные пути: анимировать grid-template-rows от 0fr до 1fr у grid-обертки или анимировать max-height до значения больше содержимого.

Переход на одном примере

Переход говорит браузеру: когда это свойство меняется, анимируй его за такое-то время вместо мгновенной смены. Задавайте его в обычном правиле элемента, а не только в :hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

Наведите курсор на первую кнопку: ее цвет плавно сменится на зеленый, и она поднимется на 4px за 0.4 секунды, а когда уберете указатель, тот же переход проиграется обратно. У второй кнопки transition: none, и она меняется мгновенно. Пользователи клавиатуры получают тот же эффект через :focus-visible.

Сокращенная запись transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Полное свойство	Что задает	По умолчанию
`transition-property`	какие свойства анимируются (`all` или список)	`all`
`transition-duration`	как долго, в `s` или `ms`	`0s`
`transition-timing-function`	кривая скорости	`ease`
`transition-delay`	ожидание перед стартом (может быть отрицательным)	`0s`

Длительность по умолчанию 0s, поэтому ничего не анимируется, пока вы ее не зададите. В сокращенной записи первое время всегда длительность, а второе задержка. Для разных настроек у разных свойств разделяйте их запятыми:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Функции плавности рядом

Функция плавности решает, как меняется скорость во время перехода. Нажмите Play, и все семь полос пройдут одинаковое расстояние за одинаковые 1.5 секунды:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Функция плавности	Ощущается как
`linear`	постоянная скорость, механически
`ease` (по умолчанию)	быстрый старт, мягкая остановка
`ease-in`	медленный старт, быстрый конец: хорошо для уходящих элементов
`ease-out`	быстрый старт, медленный конец: хорошо для появляющихся элементов
`ease-in-out`	медленно в начале и в конце
`cubic-bezier(x1, y1, x2, y2)`	ваша собственная кривая; y больше 1 дает перелет и возврат
`steps(n)`	прыжки в n равных шагов, без промежуточных кадров

Для эффектов наведения и меню отзывчиво ощущается ease-out с длительностью от 150ms до 300ms.

Что можно анимировать переходом

Переходом анимируются свойства, у которых есть промежуточные значения: цвета, длины (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Свойства, которые прыгают между ключевыми словами, например display или font-family, меняются мгновенно.

Чаще всего спотыкаются о height: auto: панель, которая открывается от height: 0 до height: auto, по умолчанию не анимируется, потому что браузер не вычисляет значения между 0 и «auto». Надежный обход это grid-обертка, единственная строка которой идет от 0fr до 1fr:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded сообщает пользователям программ чтения с экрана, открыта ли панель, чего одна анимация не делает.

Код после окончания перехода

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Учитывайте уменьшение движения

Некоторые люди включают в настройках системы «уменьшить движение», потому что движение на экране вызывает у них головокружение или отвлекает. Оставьте плавную смену цвета и прозрачности, а крупные перемещения уберите медиазапросом:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Плавные переходы без рывков

transform и opacity дешевле всего анимировать: браузер может двигать и растворять элемент без пересчета раскладки. Переход width, height, top или margin заставляет браузер заново раскладывать страницу на каждом кадре, и на медленных телефонах это может дергаться. Чтобы что-то сдвинуть, предпочитайте transform: translate(), а не left или margin. Функции разобраны на странице про transform.

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

transition только в правиле :hover. Эффект анимируется при наведении, но возвращается скачком, когда наведение заканчивается. Ставьте transition в базовое правило.
Длительность без единицы. transition: opacity 300 невалидно. Пишите 300ms или 0.3s.
transition: all. Анимирует каждое меняющееся свойство, включая те, которые вы не собирались анимировать, и может сделать изменения раскладки вялыми. Перечисляйте свойства.
Ожидание, что display: none растворится. display меняется мгновенно. Анимируйте opacity (а в конце задайте visibility: hidden).
Переход к height: auto. Он прыгает. Используйте прием с grid-template-rows выше.
Долгие длительности для мелких взаимодействий. Все, что дольше примерно 400ms на кнопке или меню, ощущается медленным.

Часто задаваемые вопросы

Как работают переходы в CSS?

Вы указываете у элемента, какие свойства анимировать и как долго, например transition: background-color 0.3s ease;. Когда значение этого свойства меняется (через :hover, класс или JavaScript), браузер анимирует переход от старого значения к новому вместо мгновенной смены.

В каком порядке идут значения в сокращенной записи transition?

transition: property duration timing-function delay;, например transition: opacity 0.3s ease-in 0.1s;. Строгое правило одно: первое значение времени это длительность, второе задержка. Несколько переходов разделяются запятыми.

Почему не работает transition в CSS?

Частые причины: transition есть только в правиле :hover (поэтому анимация есть при наведении, а обратно стиль возвращается скачком), свойство нельзя анимировать (display или height до auto), у длительности нет единицы (0.3 вместо 0.3s) или значение меняется в тот же момент, когда элемент добавляется на страницу.

Можно ли анимировать переход к height: auto?

Обычным переходом height не во всех браузерах: для интерполяции к auto нужно новое свойство interpolate-size, которое пока поддерживается не везде. Частые обходные пути: анимировать grid-template-rows от 0fr до 1fr у grid-обертки или анимировать max-height до значения больше содержимого.

Чем transition отличается от animation в CSS?

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

Связанные концепции

Transition в CSS: длительность, плавность и задержка