Compare the grid 0fr → 1fr trick, modern interpolate-size, and transition-behavior: allow-discrete for mount/unmount fades.
Toggle panels, then switch technique to compare animation. The instant baseline snaps with no transition.
transition-behavior: allow-discrete lets discrete properties like display stay at their old value until the transition ends — so opacity fades remain visible before display: none kicks in.
auto is a keyword resolved during layout, not a length. Engines could not interpolate from 0px to a value they only knew after measuring content.
The grid trick sidesteps this by animating grid-template-rows between 0fr and 1fr — fractional units are interpolable.
When an element first renders (e.g. display: none → block), there is no previous computed style to transition from. @starting-style defines the starting values for that first frame.
Uses transition-behavior: allow-discrete on display plus @starting-style for the enter animation. Requires Chromium 117+ / Safari 18.2+.
On hide, display stays block until opacity finishes, then flips to none. On show, @starting-style supplies the "from" state.