Use @starting-style for Entry Animations
SHOULD: Animate first-render entrances with `@starting-style` instead of a `useEffect` mounted-flag plus double `requestAnimationFrame` — it degrades to an instant appearance where unsupported.
Animate elements in on first render with @starting-style instead of a JS mounted-flag hack
.popover { opacity: 1; transition: opacity 200ms var(--ease-out); }
@starting-style { .popover { opacity: 0; } }Bad
Good
Why it matters
A CSS transition needs a previous value to interpolate from, and a freshly-inserted element has none — so declaring a transition alone makes the element pop in. `@starting-style` supplies the "before it existed" style, letting the browser animate the very first frame. That removes the classic React workaround (mount flag + double requestAnimationFrame), which costs an extra render and produces intermittent "sometimes it does not animate" bugs when the browser paints before the flag flips. Where unsupported it degrades to an instant appearance.