Top Layer Transitions

Smoothly animate elements into and out of the top layer.

Native Dialog

Notice the smooth entry and exit animations. By combining @starting-style, display: none transitions, and the overlay property, we achieve fluid top-layer animations.

HTML Popover API

Opening is pure CSS via @starting-style. In browsers that support overlay and discrete display transitions, light dismiss animates too; elsewhere, only the close button below runs the animated exit fallback.