@starting-style: entry transitions without setTimeout

Transitions need a before and an after. New DOM nodes do not have a before. They get inserted, styled, and painted at the final state, which is why your "fade in" toast often just appears.

@starting-style fills in that missing first frame. It gives the browser a starting value for elements that are newly rendered, coming out of display: none, or entering the top layer as a <dialog> or popover.

That means less JavaScript glue. No "add the class on the next animation frame." No setTimeout(..., 0). No forced layout read just to make CSS notice that something happened.

MDN marks @starting-style as Baseline 2024, shipped across every major engine since August 2024. The practical version is simple: unsupported browsers still show the element; they just skip the entry transition.

For dialogs, popovers, and anything transitioning from display: none, pair it with allow-discrete on the display transition so the browser keeps the element visible while the entry transition runs.

The rule can be standalone or nested. Keep it after the final-state rule when you use the standalone form, because it has the same specificity as the selector it contains.