A step-by-step guide to animating HTML dialog elements in and out using modern CSS features. Covers the `allow-discrete` transition-behavior keyword to handle `display` property changes, `@starting-style` to define pre-animation states for fade-in effects, and the `overlay` keyword for smooth backdrop transitions. Introduces a 'three-state system' (on the way in, open, on the way out) as a mental model for structuring animation styles, with source order mattering for correct specificity. Also includes a `prefers-reduced-motion` media query pattern and a ready-to-copy final snippet.
Table of contents
Introducing allow-discreteUsing @starting-styleThe *Three State* SystemThe BackdropDemoJust The SnippetConclusion10.2K Impressions