Animating display none without workarounds
You couldn't transition display. Workarounds were JS that set display: none after transition end, or visibility plus opacity and pointer-events. Now discrete properties can participate.
2 transition: opacity .2s, overlay .2s allow-discrete;
3 transition-behavior: allow-discrete;
4}
5.panel.hidden {
6 opacity: 0; display: none;
7}
2.panel.hidden { opacity: 0; visibility: hidden; }
3// JS: after transition, set display:none and pointer-events
4el.addEventListener('transitionend', () => {
5 el.style.display = 'none';
6});
Browser Support for transition-behavior
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Real display
Animate to display: none. No need to keep the element in the layout with visibility.
No transitionend
Browser handles the discrete flip at the right time. No JS listening for transitionend.
Overlay too
overlay is another discrete property. Useful for popovers and modals.
How it works
display isn't interpolable, so it was left out of transitions. To hide after a fade you either listened for transitionend in JS and then set display: none, or you kept the element in layout with visibility: hidden and pointer-events: none so it didn't block clicks.
transition-behavior: allow-discrete lets discrete properties like display and overlay participate. The browser runs the interpolable transition (e.g. opacity), then flips the discrete value at the right moment. No JS.