transition-behaviorBaseline · Newly available
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%.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Aug 6, 2024.
Browser support
DesktopChrome
1–116Not supported
117+Supportedsince Sep 12, 2023
Current: 155Edge
12–116Not supported
117+Supportedsince Sep 15, 2023
Current: 154Firefox
1–128Not supported
129+Supportedsince Aug 6, 2024
Current: 157Safari
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27MobileChrome Android
18–116Not supported
117+Supportedsince Sep 12, 2023
Current: 155Firefox Android
4–128Not supported
129+Supportedsince Aug 6, 2024
Current: 157Safari iOS
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on Aug 6, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN: transition-behavior.
Feature detection
CSS · check before using
@supports (transition-behavior: initial) {
/* styles that rely on transition-behavior */
}
/* or in JavaScript */
if (CSS.supports("transition-behavior", "initial")) {
// use it
}Documentation (MDN)
Specification
Sub-features
Support for each part of the feature (2). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| transition-behavior | 117 | 117 | 129 | 17.4 | 117 | 129 | 17.4 |
| transition.transition-behavior | 117 | 117 | 129 | 17.4 | 117 | 129 | 17.4 |