@starting-style — interactive playground

, this selector no longer matches, so newly
   * inserted cards get NO "before" state and just pop in at their final
   * opacity/transform — the exact problem the at-rule fixes.
   */
  @starting-style {
    body[data-starting="on"] .toast.preset-fade { opacity: 0; transform: translateY(16px); }
    body[data-starting="on"] .toast.preset-scale { opacity: 0; transform: translateY(0) scale(0.82); }
    body[data-starting="on"] .toast.preset-slideleft { opacity: 0; transform: translateX(-28px); }
  }

/* ---- bonus demo: display:none -> block via transition-behavior ---- */
  .drawer {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-top: 12px;
    /* `display` needs its own allow-discrete entry in the transition list so
       the browser knows to keep the element painted for the animation's
       duration instead of flipping display instantly. */
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
  }
  .drawer.open { display: block; opacity: 1; transform: translateY(0); }

@starting-style {
    body[data-starting="on"] .drawer.open { opacity: 0; transform: translateY(-10px); }
  }

.drawer h3 { margin: 0 0 6px; font-size: 0.92rem; }
  .drawer p { margin: 0; color: var(--muted); font-size: 0.84rem; }
</style>
</head>
<body>
  <div class="pg">
    <h1 class="pg-title">🎮 <code>@starting-style</code> — entry animations without JS</h1>
    <p class="pg-sub">
      Click <b>Add card</b>, then flip the toggle off and add another. Same <code>transition</code>,
      same markup — the only difference is whether <code>@starting-style</code> gives the browser
      a "before" state to animate from.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>

<div class="btn-row">
        <button class="btn primary" id="addCard">+ Add card</button>
        <button class="btn ghost" id="reset">Reset</button>
        <label class="toggle" style="margin-left: 6px">
          <input type="checkbox" id="startingToggle" checked />
          <span class="switch"></span>
          <span><code>@starting-style</code> entry animation</span>
        </label>
      </div>

<p class="hint" style="margin-top: 10px">
        Turn the toggle <b>off</b> to see the old problem: without a "before" state, a new card
        can only jump straight to its final look — there is nothing for <code>transition</code>
        to animate from.
      </p>

<div class="presets" style="margin-top: 14px" id="presetSeg" role="group" aria-label="Entry animation preset">
        <div class="seg">
          <button type="button" data-preset="fade" aria-pressed="true">Fade + slide up</button>
          <button type="button" data-preset="scale" aria-pressed="false">Scale pop</button>
          <button type="button" data-preset="slideleft" aria-pressed="false">Slide from left</button>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — cards entering the DOM</div>
      <div class="stage-toast" id="stage"></div>
      <div class="status" id="status" style="margin-top: 12px" aria-live="polite">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready — add a card to see it enter.</span>
      </div>
      <p class="hint">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; <code>@starting-style</code> only
        ever applies to how something first appears, never to how it leaves).</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Bonus — revealing a hidden panel</div>
      <div class="btn-row">
        <button class="btn" id="drawerBtn" aria-expanded="false" aria-controls="drawer">Open panel</button>
      </div>
      <div class="drawer" id="drawer">
        <h3>Hidden panel</h3>
        <p>This element is <code>display: none</code> until opened. <code>transition-behavior: allow-discrete</code>
          lets <code>display</code> itself join the transition, so the fade-in isn't instant.</p>
      </div>
      <p class="hint" id="drawerNote"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The CSS behind card entry (updates live)</div>
      <div class="code" id="code"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.