Animate elements as they appear — dialogs, popovers, and any element switching from display: none to its visible state. Pick the transition properties, target context, and easing, then preview the entry animation live and copy production-ready CSS using @starting-style with transition-behavior: allow-discrete.
<dialog> and popover modes, the selector should target the open state (e.g. dialog[open], :popover-open).transition-behavior: allow-discrete to animate display, content-visibility, and overlay.
Before @starting-style, the browser had no concept of before-open styles for elements that were not in the DOM, were display: none, or were inside the top layer (<dialog>, popovers). Setting opacity: 0 and transitioning it to 1 failed because both states applied at the same time once the element was rendered. @starting-style declares the styles that should apply for one frame before the element enters its open state, giving the transition a "from" value to interpolate from. Combined with transition-behavior: allow-discrete, you can also animate discrete properties such as display and overlay across the show/hide boundary.