Stagger

<div class="flex w-full max-w-sm flex-col items-start gap-4">
  <input type="checkbox" id="stagger-replay" class="peer/replay sr-only" />
  <label
    for="stagger-replay"
    class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors select-none hover:bg-accent peer-focus-visible/replay:outline-2 peer-focus-visible/replay:outline-offset-2 peer-focus-visible/replay:outline-ring"
  >
    Toggle the list
  </label>

  <ul
    class="w-full space-y-2 peer-checked/replay:*:translate-y-2 peer-checked/replay:*:opacity-0"
  >
    <li
      class="rounded-lg border border-border px-4 py-3 transition-[opacity,translate] duration-500 ease-out starting:translate-y-2 starting:opacity-0 motion-safe:[transition-delay:calc(sibling-index()*100ms)]"
    >
      <p class="font-medium">Build passed</p>
      <p class="text-xs text-muted-foreground">main · 34s</p>
    </li>
    <li
      class="rounded-lg border border-border px-4 py-3 transition-[opacity,translate] duration-500 ease-out starting:translate-y-2 starting:opacity-0 motion-safe:[transition-delay:calc(sibling-index()*100ms)]"
    >
      <p class="font-medium">Preview deployed</p>
      <p class="text-xs text-muted-foreground">pr-214 · 1m</p>
    </li>
    <li
      class="rounded-lg border border-border px-4 py-3 transition-[opacity,translate] duration-500 ease-out starting:translate-y-2 starting:opacity-0 motion-safe:[transition-delay:calc(sibling-index()*100ms)]"
    >
      <p class="font-medium">Checks green</p>
      <p class="text-xs text-muted-foreground">12 of 12 · 2m</p>
    </li>
    <li
      class="rounded-lg border border-border px-4 py-3 transition-[opacity,translate] duration-500 ease-out starting:translate-y-2 starting:opacity-0 motion-safe:[transition-delay:calc(sibling-index()*100ms)]"
    >
      <p class="font-medium">Released v2.1.0</p>
      <p class="text-xs text-muted-foreground">production · 3m</p>
    </li>
  </ul>
</div>

How it works

• sibling-index() computes the delay: motion-safe:[transition-delay:calc(sibling-index()*100ms)] gives each item a delay from its 1-based position among its siblings. No per-item delay classes, no loops, no timers — add or reorder items and the cascade just follows.
• The entrance itself is @starting-style: base classes are the settled state, starting:opacity-0 starting:translate-y-2 is the frame each item transitions from the first time it renders. transition-[opacity,translate] duration-500 ease-out does the rest.
• The demo’s toggle replays the cascade without moving the layout: peer-checked/replay:*:translate-y-2 peer-checked/replay:*:opacity-0 on the list moves every item to its hidden frame, so checking staggers them out and unchecking staggers them back in. Opacity and translate don’t affect layout, so nothing below the list shifts.
• @starting-style also applies when an element comes back from display: none, so the entrance runs whenever your framework mounts the fragment — not only on full page load.
• The delay is gated behind motion-safe: because the global reduced-motion rule shortens durations but leaves delays alone, and a delayed item holds its invisible starting frame until the delay expires. This is the one motion pattern in the library where the global rule isn’t enough by itself.
• The landing page of this site cascades its header and showcase cards with the same sibling-index() delay trick.

Accessibility

• The motion is decorative. Every item is in the DOM from the first byte, so crawlers, find-in-page, and screen readers see the full list regardless of animation state.
• The demo’s toggle is an sr-only checkbox named by its visible label; the focus ring is forwarded onto the label with peer-focus-visible/replay:outline-*.
• The toggle only fades the items — they keep their space and stay in the accessibility tree. It’s a replay control, not a disclosure; use a real show/hide pattern to actually remove content.

Reduced motion

The global prefers-reduced-motion rule collapses the transition to an instant appearance, and motion-safe: removes the per-item delays entirely, so no content is ever held invisible.

The fallback story

• Without sibling-index(), the calc() is invalid and the delay declaration is dropped — every item animates at once. The entrance still plays, just without the cascade.
• Without @starting-style, there is no starting frame: items render already settled. You lose the animation and nothing else.