Генератор CSS transition

Задайте исходное и конечное состояния блока, настройте переход для каждого свойства и посмотрите, как они идут во времени. Генератор подсказывает, какие свойства сменятся мгновенно, чем опасны all и width, и выдаёт готовый CSS для наведения, переключения класса или появления элемента.

Как пользоваться

Выберите пример в галерее или вставьте свой transition в поле «Свой transition». В «Состояниях блока» переключите «Исходное» и «Конечное» и измените сдвиг, поворот, прозрачность, цвет и другие параметры — предпросмотр показывает редактируемое состояние. «Переключить состояние» запускает переход, а шкала времени под блоком показывает, когда начинается и заканчивается каждое свойство; кривая внутри полосы — плавность.

Выбор примера сохраняет настройку «Когда переключать». Для появления из скрытого состояния выберите в этой настройке «Появление из display: none». «Замедлить в 4 раза» помогает разглядеть быстрые переходы и задержки. «Свой обратный переход» задаёт отдельные время и плавность для возврата. Раздел «Подсказки» сообщает о свойствах без перехода, лишних переходах и дорогих для браузера свойствах. Ссылка «Поделиться» сохраняет все настройки.

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

Переход срабатывает, когда вычисленное значение свойства меняется: при наведении, фокусе, смене класса. Браузер не мгновенно ставит новое значение, а плавно ведёт к нему за transition-duration, начиная через transition-delay, со скоростью по кривой transition-timing-function. Свойства без перехода меняются сразу.

Действует transition того правила, которое применяется к элементу в новом состоянии. Если задать его только в основном правиле, туда и обратно переход одинаковый. Если в :hover задать другой, он работает при наведении, а основное правило — при возврате. Так делают быструю реакцию и плавный возврат.

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

Какие свойства анимировать

Дешевле всего transform и opacity: браузер меняет готовое изображение слоя, не пересчитывая раскладку. Цвет, скругление и filter требуют перерисовки элемента. width, height, top и margin пересчитывают раскладку страницы на каждом кадре, и соседние блоки сдвигаются вслед за элементом.

transition: all удобно писать, но оно ловит любые изменения, включая случайные. Перечислите нужные свойства — так поведение предсказуемо, а в коде видно, что именно движется.

display раньше не анимировался: блок появлялся и пропадал мгновенно. Теперь с transition-behavior: allow-discrete (в короткой записи — слово allow-discrete) браузер откладывает display: none до конца исчезновения, а @starting-style задаёт вид элемента в первом кадре появления. В старых браузерах блок просто появляется без перехода.

Часть людей отключает движение в настройках системы. Медиазапрос prefers-reduced-motion: reduce позволяет убрать переходы для них — включите его в генераторе.

Современные возможности

Переход к height: auto. Раньше высоту по содержимому нельзя было анимировать: браузер не умел считать промежуточные значения между числом и ключевым словом. Объявление interpolate-size: allow-keywords разрешает это, и раскрывающийся блок больше не требует скрипта или подбора max-height. Работает в Chrome и Edge; в остальных браузерах блок просто раскрывается сразу.

Собственные свойства через @property. Переменная --sheen-angle без регистрации — просто строка, и градиент с ней меняется скачком. Правило @property сообщает браузеру тип <angle>, после чего угол градиента плавно поворачивается. Так анимируют градиенты, цвета внутри background-image и любые числа в сложных значениях.

Плавность linear(). Функция задаёт кривую списком точек и умеет то, что не записать одной cubic-bezier(): пружину с несколькими колебаниями и отскок. Примеры «Пружина linear()» и «Отскок linear()» показывают её на шкале времени ломаной линией.

Появление и @starting-style. Вместе с allow-discrete они анимируют элементы, которые появляются из display: none: подсказки, меню и модальные окна.

Сравните примеры «Старт с середины пути» и «Скачок в конце»: отрицательная задержка сразу пропускает часть перехода, а step-end удерживает исходное значение до конца длительности. Подробнее — в руководстве MDN по CSS-переходам.

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

Выберите эффект по миниатюре и переключите состояние в предпросмотре. В галерее есть прокрутка.

Предпросмотр

Фон предпросмотра
Aa

Настройка перехода

Когда переключать

Вставьте значение или объявление transition — переходы заменят список ниже.

Подсказки

    Готовый CSS

    Включите JavaScript, чтобы настраивать переход и видеть его в предпросмотре.

    Запись

    Переход элемента

    .box {
  transform: translate(0px, 0px);
  background-color: #3f6fd8;
  transition:
    transform 0.2s ease-out,
    background-color 0.2s ease;
}

.box:hover,
.box:focus-visible {
  transform: translate(0px, -6px);
  background-color: #2f5bc4;
}

@media (prefers-reduced-motion: reduce) {
  .box {
    transition: none;
  }
}

    Подробнее о свойствах — в справочнике: transition и урок переходы в CSS. Кривую плавности можно подобрать в редакторе cubic-bezier, сложное движение с несколькими кадрами — в генераторе анимаций, а сдвиг и поворот — в генераторе transform.