Переход: промежуточные кадры рисует браузер

Любая перемена на странице — это два состояния. Флажок не отмечен — полоса пустая, отмечен — полная. Без подсказки браузер переключает их за один кадр: в одном полосы нет, в следующем она уже во всю длину. Свойство transition просит нарисовать промежуточные кадры, и ни координат, ни расписания кадров вы при этом не пишете.

Состояние в примерах статьи переключает флажок, и для этого нужны два новых кусочка языка селекторов. :checked — псевдокласс состояния: input:checked выбирает флажок, на котором стоит галочка. Знак + между селекторами значит «сосед, который стоит в разметке сразу после», поэтому input:checked + .bar читается как «полоса сразу за отмеченным флажком». Оба пригодятся и за пределами примеров: так в CSS делают меню, вкладки и аккордеоны без единой строчки скрипта.

Ниже две одинаковые полосы, но у второй есть transition: width 2s. Оба флажка отмечаются один за другим, и сразу после этого замеряется ширина. Предскажите вторую строку: где окажется каждая полоса в момент замера?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Было, стало и кадры между ними</title>
  <style>
  .bar { width: 0; height: 10px; background: steelblue; }
  .slow { transition: width 2s; }
  input:checked + .bar { width: 200px; }
</style>
</head>
<body>

<input type="checkbox" id="jump">
<div class="bar"></div>
<input type="checkbox" id="slow">
<div class="bar slow"></div>
</body>
</html>

measure(".bar", "width");
press("#jump");
press("#slow");
measure(".bar", "width");

Запись transition складывается из четырёх частей:

Разным свойствам можно дать разные переходы через запятую: transition: width 300ms, opacity 1s. Пишут transition в обычное правило элемента, а не в правило «стало»: оттуда он работает в обе стороны. Объявленный только для отмеченного флажка, переход сработает по пути туда, а обратно полоса прыгнет. Сами переходы — Baseline widely с 30.03.2018.

На настоящей странице состояние чаще переключает скрипт: добавляет элементу класс, и срабатывает правило, как наше input:checked + .bar. Переходу всё равно, кто сменил состояние, а как это делает скрипт, покажет часть II — переключение классов из JavaScript.

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

Стоп-кадр даёт задержка со знаком минус. Обычная задержка 150ms заставляет переход подождать, а -150ms запускает его так, будто он идёт уже 150 мс. При длительности 300ms это половина времени. Предскажите стартовую длину полосы на странице примера: начатый переход, как у медленной полосы выше, или 150 мс, что он будто бы проехал?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Стоп-кадр: отрицательная задержка</title>
  <style>
  .bar {
    width: 0; height: 10px; background: steelblue;
    transition: width 300ms linear -150ms;
  }
  input:checked + .bar { width: 200px; }
</style>
</head>
<body>

<input type="checkbox">
<div class="bar"></div>
</body>
</html>

measure(".bar", "width");
press("input");
measure(".bar", "width");

Первый замер здесь не для сравнения, а чтобы переход вообще случился. Браузер считает стили не после каждой строки, а когда их спрашивают или когда рисует кадр; страница примера встаёт на сцену и щелчок идёт сразу за ней — без единого кадра между ними. Замер до щелчка заставляет браузер посчитать пустую полосу, и у неё появляется «было». Без этого замера стили впервые посчитались бы уже за отмеченным флажком, и полоса сразу оказалась бы на 200px: переходить было бы не из чего. Та же ловушка вернётся в конце статьи, когда элемент появляется на странице впервые.

Прогнозируем только стоп-кадр: отрицательная задержка и linear дают долю пути, известную заранее. Число посреди настоящего движения зависит от кадров вкладки, и прогноз с ним не сойдётся.

Функция плавности решает, какую долю пути отдать какой доле времени: одно и то же расстояние можно проехать равномерно, а можно рывком в начале и с торможением в конце. У каждой части записи transition есть и своё отдельное свойство, у плавности это transition-timing-function — им меняют одну часть, не переписывая остальные. У двух полос ниже одинаковые 300ms и одинаковый стоп-кадр на половине времени. У первой, с классом even, плавность linear, у второй не указана вовсе. Предскажите: сколько проехала первая и одинаково ли с ней вторая?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Плавность: ease, linear и linear()</title>
  <style>
  .bar {
    width: 0; height: 10px; background: steelblue;
    transition: width 300ms -150ms;
  }
  .even { transition-timing-function: linear; }
  input:checked + .bar { width: 200px; }
</style>
</head>
<body>

<input type="checkbox" id="a">
<div class="bar even"></div>
<input type="checkbox" id="b">
<div class="bar"></div>
</body>
</html>

same(".bar", "width");
press("#a");
press("#b");
measure(".even", "width");
same(".bar", "width");

У ease есть родня: ease-in медленно разгоняется, ease-out медленно тормозит, ease-in-out делает и то и другое, а cubic-bezier() задаёт свою кривую четырьмя числами. Кривая из четырёх чисел меняет направление не больше двух раз: проскочить цель, откатиться за неё и вернуться она ещё может, а качнуться у цели несколько раз, затухая, уже нет. Пружину с любым числом качаний пишут функцией linear() с точками.

На практике плавность выбирают не по вкусу, а по роли движения. Отклик на действие человека — нажатие кнопки, раскрытие меню — делают коротким, 100–200ms, и с торможением в конце: длинное ожидание ощущается как подтормаживание. Появление и уход элемента — чуть дольше, 200–300ms. А движение, которое человек должен успеть проследить, например перелёт карточки в корзину, делают заметным, до полусекунды. Всё, что дольше, начинает казаться медленным интерфейсом, даже если выглядит красиво.

Каждая точка в linear() — доля пути, после неё можно указать момент времени. linear(0, 1.25 50%, 0.95 75%, 1) значит: к половине времени проехать 125% пути, к трём четвертям откатиться до 95%, к концу встать ровно в цель. Между точками движение равномерное, а точек можно поставить сколько угодно. Цель у обеих полос ниже — 160px, у второй плавность-пружина. Предскажите вторую строку.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Плавность: ease, linear и linear()</title>
  <style>
  .bar {
    width: 0; height: 10px; background: steelblue;
    transition: width 300ms linear -150ms;
  }
  .spring { transition-timing-function: linear(0, 1.25 50%, 0.95 75%, 1); }
  input:checked + .bar { width: 160px; }
</style>
</head>
<body>

<input type="checkbox" id="a">
<div class="bar"></div>
<input type="checkbox" id="b">
<div class="bar spring"></div>
</body>
</html>

measure(".bar", "width");
press("#a");
press("#b");
measure(".bar", "width");

Переход едет между двумя значениями, у которых есть середина. У 0 и 40px она есть, у 0 и auto — нет: auto не длина, а просьба посчитать высоту по содержимому, как это делает нормальный поток. Самая частая жертва — раскрывающаяся панель: закрыта — height: 0, открыта — height: auto. Правило написано, переход объявлен, а панель всё равно прыгает, и кажется, что CSS не работает.

Ниже две панели с одинаковым абзацем высотой 40px. overflow: hidden прячет всё, что не влезло в высоту панели, поэтому закрытая панель пуста. Первая раскрывается до auto, вторая, с классом fixed, — до числа 40px; переход у обеих одинаковый, со стоп-кадром на середине. Предскажите вторую строку.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Честная граница: height: auto и display</title>
  <style>
  .panel { height: 0; overflow: hidden; transition: height 300ms linear -150ms; }
  .panel p { height: 40px; margin: 0; }
  input:checked + .panel { height: auto; }
  input:checked + .fixed { height: 40px; }
</style>
</head>
<body>

<input type="checkbox" id="a"><div class="panel"><p>Текст</p></div>
<input type="checkbox" id="b"><div class="panel fixed"><p>Текст</p></div>
</body>
</html>

measure(".panel", "height");
press("#a");
press("#b");
measure(".panel", "height");

Научить переход ехать к auto умеют свойство interpolate-size и функция calc-size(). Но это Baseline limited: только браузеры на Chromium, начиная с версии 129. В Firefox и Safari панель по-прежнему прыгнет, так что строить на них раскрытие рано.

С display ещё строже: промежуточных значений у него нет вовсе, элемент либо участвует в раскладке, либо нет. display: none гасит элемент в тот же миг и обрывает его переходы: прозрачность не успевает плавно дойти до нуля. Свойство transition-behavior: allow-discrete (Baseline newly с 06.08.2024) разрешает переход таким «прыгающим» свойствам, и display держится до конца пути. Но саму анимацию display умеют только Chrome 117+ и Safari 18+, это limited. В Firefox элемент гаснет сразу — что с allow-discrete, что без.

Двигать и увеличивать элемент удобнее не шириной и отступами, а трансформацией: она не толкает соседей и не заставляет браузер заново раскладывать страницу, поэтому идёт заметно плавнее. Долго для этого было одно свойство transform, где всё пишется одной строкой: transform: translateX(20px) scale(2) — сдвиг по горизонтали и масштаб. У одной строки есть ловушка каскада: второе правило с transform не дописывает первое, а заменяет его целиком.

Сегодня у сдвига, масштаба и поворота есть собственные свойства — translate, scale и rotate, Baseline widely с 05.02.2025. Сравним. У обеих точек ниже по три класса, и у склейки .one.big специфичность выше, чем у .one: в споре за transform побеждает она. Прибор меряет коробку уже после трансформации. Предскажите обе строки: где левый край каждой точки и какой она ширины?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>translate, scale и rotate вместо одной строки</title>
  <style>
  .dot { width: 20px; height: 20px; background: steelblue; }
  .one { transform: translateX(20px); }
  .one.big { transform: scale(2); }
  .two { translate: 20px; }
  .two.big { scale: 2; }
</style>
</head>
<body>

<div class="dot one big"></div>
<div class="dot two big"></div>
</body>
</html>

measure(".dot", "x");
measure(".dot", "width");

Для переходов это не мелочь. Если «было» — сдвиг, а «стало» — масштаб в той же строке transform, переход поедет от «сдвинута» к «увеличена и не сдвинута», и точка по пути поплывёт назад. С отдельными свойствами у каждого свой путь: сдвиг стоит на месте, растёт только масштаб, а запись transition: scale 200ms, translate 1s ещё и даёт им разное время.

transform — одна строка на всё: новое правило не дописывает её, а заменяет целиком. translate, scale и rotate — три отдельных свойства, и в каскаде они друг друга не затирают.

Уведомление «Сохранено» хочется проявить плавно: вставили на страницу — прозрачное, через секунду видно. Но переход едет от «было» к «стало», а у элемента, которого только что не было, «было» нет. Это та же ловушка, что со стоп-кадром без первого замера: браузер впервые считает стиль сразу итоговым, и переходить не из чего.

@starting-style задаёт это «было» явно. Внутри его фигурных скобок — обычные правила, но действуют они только на первый стиль элемента, и с них начинается переход. Ниже два одинаковых уведомления, стартовый стиль есть только у первого, с классом soft. Прибор меряет прозрачность сразу после вставки. Предскажите строку.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Появление: @starting-style</title>
  <style>
  .toast { transition: opacity 1s; }
  @starting-style { .soft { opacity: 0; } }
</style>
</head>
<body>

<div class="toast soft">Сохранено</div>
<div class="toast">Сохранено</div>
</body>
</html>

measure(".toast", "opacity");

Новым для перехода браузер считает и элемент, который показали после display: none: пока элемент скрыт, «было» у него нет. Плавный показ даёт тот же @starting-style, а allow-discrete для появления не нужен — он держит display только на пути к none.

Проявляться при открытии умеет и раскрывающийся details. Щелчок по summary ставит ему атрибут open, а всё содержимое, кроме summary, браузер собирает в псевдоэлемент ::details-content. Два двоеточия отличают псевдоэлемент от псевдокласса: это не состояние, а часть элемента, у которой нет своего тега в разметке. Правил два: содержимое прозрачное и с переходом, у открытого — видимое. Предскажите обе строки: сколько открытых details найдёт прибор до щелчка и после?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Появление: @starting-style</title>
  <style>
  details::details-content { opacity: 0; transition: opacity 1s; }
  details[open]::details-content { opacity: 1; }
</style>
</head>
<body>

<details>
  <summary>Подробнее</summary>
  <p>Текст проявляется, а не выскакивает.</p>
</details>
</body>
</html>

count("details[open]");
press("summary");
count("details[open]");

Проявлять вместо этого сам абзац правилами для details p ненадёжно: в Chrome такой абзац не проявляется вовсе, а в Firefox — не при каждом открытии. ::details-content — Baseline newly с 16.09.2025, и плавную высоту раскрытия ему снова даёт только limited interpolate-size.

Без скрипта открывается и поповер — всплывающий элемент поверх страницы (Baseline newly с 27.01.2025). Элемент с атрибутом popover спрятан, пока его не откроет кнопка, у которой в атрибуте popovertarget записан его id. Предскажите обе строки: какой display у подсказки до нажатия и после?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Появление: @starting-style</title>
  <style>
  #tip { transition: opacity 1s; }
  @starting-style { #tip { opacity: 0; } }
</style>
</head>
<body>

<button popovertarget="tip">Подсказка</button>
<div id="tip" popover>Черновик сохраняется сам</div>
</body>
</html>

measure("#tip", "display");
press("button");
measure("#tip", "display");

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

Два соседних механизма пока есть не везде. Плавная смена страницы при переходе по ссылке, @view-transition, работает в Chrome и Safari, но не в Firefox. Анимация, привязанная к прокрутке, — тоже в Chrome и Safari, а в Firefox нет. Оба пробела браузеры взялись закрыть по плану Interop 2026, так что статус стоит проверить позже.

Когда движением нужно управлять — остановить на полпути, развернуть, дождаться конца, — это делают из JavaScript через Web Animations API, а смену вида внутри одной страницы запускает document.startViewTransition. Это уже не пролог.

И если впереди у вас мобильное приложение: в React Native строка transition в стиле не работает. В предпросмотре в браузере полоса едет, а на телефоне молча прыгает, поэтому движение там собирают из значения, подписки и кадра.