For over 10 years, transitioning elements from display: none was considered impossible in pure CSS without JavaScript reflow workarounds like requestAnimationFrame or void element.offsetWidth .

Those days are officially over! Modern CSS introduces two game-changing features (Baseline 2024 across Chrome, Safari, and Firefox):

@starting-style : Defines the before-change style snapshot at frame 0 when an element transitions from display: none or mounts to the DOM.

transition-behavior: allow-discrete : Delays flipping to display: none until your exit transitions finish completely.

💡 The Mental Model: The Broadway Stage Analogy

To understand why this is necessary, think of a browser render engine like a Broadway theater:

Without @starting-style : Toggling display: none to display: block is like an actor suddenly teleporting from backstage straight into a 100% bright spotlight.…