allow-discrete

The exit animation, which is the hard half

Caveatdisplay is a discrete property: it flips at the halfway point, so the element vanishes mid-fade. allow-discrete makes the browser hold display: none back until the rest of the transition has finished.

FallbackIt only delays the property, never interpolates it. Nothing to fall back to either: without support the element disappears immediately, which is exactly today's behaviour.

.panel {
  transition: opacity .35s,
              display .35s allow-discrete;
}
/* now display: none waits for the fade */

Published 1 Aug 2026