transition-behavior
The transition-behavior: allow-discrete CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%.
Overview
The transition-behavior: allow-discrete CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 117 | 117 | 129 | 17.4 | 117 | 17.4 | |
transition-behavior `transition-behavior` value | 117 | 117 | 129 | 17.4 | 117 | 17.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.popover {
transition: opacity 0.3s ease,
display 0.3s ease allow-discrete;
opacity: 1;
}
.popover:not(:popover-open) {
opacity: 0;
}
@starting-style {
.popover:popover-open {
opacity: 0;
}
}Live demo
Normal. transition(comparison)
transition-behavior Normal. transition(comparison) demo.
PreviewFullscreen
Use cases
State transitions
Use transition-behavior to clarify UI changes such as opening, reordering, or page transitions.
Polished feedback
Add motion only where it reinforces direction, hierarchy, or system response.
Cautions
- Motion features can quickly become distracting if they are applied too broadly.
- Keep animation rules paired with sensible non-animated fallbacks.
Accessibility
- Respect reduced-motion preferences and keep essential information available without animation.
- Motion should support understanding, not become a barrier to interaction.
Related links
Powered by web-features