demo · v132

Animate <dialog> entrances with no JS choreography

The new toggle/beforetoggle events let you align CSS transitions with the open/close phase — combined with @starting-style and transition-behavior: allow-discrete on display and overlay, you get a clean entrance and exit driven entirely from CSS. Pick a preset and trigger.

checking support…
last event:   current state: closed

generated CSS

Watch the entrance

This dialog animates in via @starting-style and out via the transitioning overlay + display properties — no JS choreography, no mutation observer.

see also