🎮 @starting-style — entry animations without JS

Click Add card, then flip the toggle off and add another. Same transition, same markup — the only difference is whether @starting-style gives the browser a "before" state to animate from.

1 Controls

Turn the toggle off to see the old problem: without a "before" state, a new card can only jump straight to its final look — there is nothing for transition to animate from.

2 Result — cards entering the DOM
Ready — add a card to see it enter.

Each card is a genuinely new DOM element — no fade class added a tick after mount. Click the ✕ on a card to dismiss it (a normal transition; @starting-style only ever applies to how something first appears, never to how it leaves).

3 Bonus — revealing a hidden panel

Hidden panel

This element is display: none until opened. transition-behavior: allow-discrete lets display itself join the transition, so the fade-in isn't instant.

4 The CSS behind card entry (updates live)