transition-behavior
Allows transitions of discrete properties such as `display` and `overlay`, so an element can fade out before it disappears.
Syntax
transition: display 0.3s allow-discrete;Values
| Parameter | Type | Description |
|---|---|---|
| normal | keyword | The default: discrete properties switch instantly, without a transition. |
| allow-discrete | keyword | Discrete properties take part in the transition; `display: none` is applied at the very end of a hide transition. |
Examples
A panel that fades out and then really disappears:
<style>
.panel {
padding: 12px; background: lightblue;
transition: opacity 0.4s, display 0.4s allow-discrete;
}
.panel.hidden { opacity: 0; display: none; }
@starting-style { .panel { opacity: 0; } }
</style>
<button onclick="document.querySelector('.panel').classList.toggle('hidden')">Toggle</button>
<div class="panel">Fades out and in</div>Notes
Usually it is written as a keyword inside the transition shorthand, as above. For the appearing direction you also need @starting-style — it gives the "before" values. Supported in all current browsers since 2024.
See also
- transition — Animates the change of a property from the old value to the new one.
- @starting-style — Sets the styles an element starts from when it first appears, so a `transition` can animate its entrance.
- display — Decides how an element behaves in the flow and how it lays out its content.
- interpolate-size — Allows transitions to and from size keywords such as `auto`, `min-content` and `fit-content` — finally, `height: 0` → `height: auto`.
Related recipes
In the tutorial
- Entry and exit animations — How to show and hide an element smoothly — the @starting-style rule, transition-behavior: allow-discrete, transitions from display: none, dialog and popover open and close animations, and interpolate-size for height: auto.