transition-behavior
Allows you to enable transitions for properties that normally switch instantly, like 'display'. By setting it to 'allow-discrete', you can create entry and exit animations for elements that are removed from the DOM or hidden.
It is documented as part of the CSS Transitions specification.
Syntax
/* Usage Example */
dialog {
transition: display 0.5s, overlay 0.5s, opacity 0.5s;
/* Enables smooth transitions for the 'display' property */
transition-behavior: allow-discrete;
}
/* Global values */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;transition-behavior Browser support
Newly available
Since
2024 87% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
117+
129+
17.4+
117+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more