transition-behavior

Определение и применение

Свойство transition-behavior разрешает запуск CSS-переходов для свойств с дискретными значениями. У таких значений нет промежуточных состояний, но момент переключения можно согласовать с изменением прозрачности или другими переходами.

Чем дискретное переключение отличается от плавного перехода — в уроке «Переходные эффекты в CSS».

Попробуйте значения transition-behavior

<div class="stage">
  <input id="toggle" class="toggle" type="checkbox" /><label for="toggle">
    Изменить рамку и фон</label
  >
  <div class="demo-target">Сравните момент смены рамки</div>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  margin-top: 16px;
  padding: 16px;
  border: 6px dashed #245a85;
  background-color: #fff0bf;
  transition:
    border-style 2s linear,
    background-color 2s linear;
  transition-behavior: normal;
}
.toggle:checked ~ .demo-target {
  border-style: solid;
  background-color: #9bd3ec;
}
@media (prefers-reduced-motion: reduce) {
  .demo-target {
    transition: none;
  }
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  margin-top: 16px;
  padding: 16px;
  border: 6px dashed #245a85;
  background-color: #fff0bf;
  transition:
    border-style 2s linear,
    background-color 2s linear;
  transition-behavior: allow-discrete;
}
.toggle:checked ~ .demo-target {
  border-style: solid;
  background-color: #9bd3ec;
}
@media (prefers-reduced-motion: reduce) {
  .demo-target {
    transition: none;
  }
}

Поддержка браузерами

Спецификация: CSS transitions-2

✓Поддерживается во всех основных браузерах с 2024 года.

Отдельные значения (2) поддерживаются не везде — смотрите таблицу.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.transition-behavior

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
transition-behavior	✓117	✓117	✓129	✓103	✓17.4	✓117	✓129	✓78	✓17.4	✓24.0	✓117	✓17.4
allow-discrete	✓117	✓117	✓129	✓103	✓17.4	✓117	✓129	✓78	✓17.4	✓24.0	✓117	✓17.4
normal	✓117	✓117	✓129	✓103	✓17.4	✓117	✓129	✓78	✓17.4	✓24.0	✓117	✓17.4
Transitions content-visibility property when set to allow-discrete	✓117	✓117	×Нет	✓103	✓18	✓117	×Нет	✓78	✓18	✓24.0	✓117	✓18
Transitions display property when set to allow-discrete	✓117	✓117	×Нет	✓103	✓18	✓117	×Нет	✓78	✓18	✓24.0	✓117	✓18

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

Проверяйте отдельно поддержку allow-discrete, переходов конкретного свойства и @starting-style. Эти возможности появлялись в браузерах не одновременно.

CSS синтаксис:

transition-behavior: [ normal | allow-discrete ]#;

/* Глобальные значения */
transition-behavior: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. # означает одно или несколько значений через запятую, соответствующих списку transition-property.

JavaScript синтаксис:

element.style.transitionBehavior = "allow-discrete";

Начальное значение свойства

normal.

Значения свойства

Когда происходит переключение

Обычно дискретное свойство меняется при достижении половины прогресса перехода с учётом функции времени. Для display при переходе от none элемент показывается в начале, а при переходе к none скрывается в конце: всё время затухания он остаётся отрисованным.

Нужны transition-property, ненулевая transition-duration и изменение значения. При нескольких свойствах значения списков сопоставляются по порядку; короткие списки повторяются. Поздняя запись сокращения transition может сбросить transition-behavior, поэтому задавайте его после сокращения или включайте allow-discrete в сокращённую запись.

Появление из display: none может дополнительно требовать @starting-style, чтобы браузер знал исходные стили первого отображения. Свойство transition-behavior не заменяет их. При отсутствии поддержки дискретный переключатель сработает сразу; базовое управление должно оставаться рабочим.

Спецификация

CSS Transitions — transition-behavior.

Наследуется

Нет.

Анимируемое

Нет. Это настройка запуска переходов, а не анимируемое свойство.

Примеры, попробуйте сами

Скрытие после затухания

Включите флажок: карточка сначала станет прозрачной и только затем исчезнет из раскладки. Верните normal — display: none скроет её сразу. Обратное появление здесь намеренно мгновенное.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.card {
    margin-top: 16px;
    padding: 24px;
    background: #dcfce7;
    border: 2px solid #15803d;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Скрытие после затухания</title>
  </head>
  <body>
    <div class="demo">
      <input id="hide" type="checkbox" /><label for="hide"> Скрыть карточку</label>
      <div class="card">Орехи собраны</div>
      <p>Этот текст поднимется после удаления карточки из раскладки.</p>
    </div>
  </body>
</html>

style.css

CSS

.card {
    opacity: 1;
    transition:
        opacity 800ms,
        display 800ms;
    transition-behavior: allow-discrete;
}
#hide:checked ~ .card {
    opacity: 0;
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .card {
        transition: none;
    }
}