Native List Staggering Without JavaScript

<ul class="card-list">
  <li class="card">Project Alphali>
  <li class="card">Project Betali>
  <li class="card">Project Gammali>
  <li class="card">Project Deltali>
  <li class="card">Project Epsilonli>
ul>

The number of cards can change freely. Everything that follows adapts automatically.

A @keyframes fadeSlideUp animation handles the entrance. The initial state sets opacity: 0 and pushes the card down slightly with translateY(20px).

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
}

Note: The .card base rule intentionally does not set opacity: 0. The hidden-until-animated state is applied only inside the @supports block in Step 4, ensuring cards remain visible in browsers that do not support sibling-index().

Step 2 — Applying sibling-index() for the Stagger Delay

Why does the first card need a zero delay? Because any perceptible pause before the first element appears reads as lag, not animation. Subtracting 1 from sibling-index() ensures the first card (position 1) receives a delay of 0s and plays immediately. The second card waits 0.1s, the third 0.2s, and so on.

This rule must be placed inside @supports and @media guards (as shown in Step 4) to prevent cards from being invisible in unsupported browsers:

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-delay: calc(sibling-index() * 1s)) {
    .card-list .card {
      opacity: 0;
      animation: fadeSlideUp 0.4s ease both;
      animation-delay: calc((sibling-index() - 1) * 0.1s);
    }
  }
}

If a sixth card is appended to the DOM, it automatically receives a 0.5s delay. No JavaScript-triggered recalculation required. The browser’s style engine recalculates sibling-index() values automatically when the DOM changes.

Step 3 — Using sibling-count() for Adaptive Duration

With a small list of five cards, a fixed 0.4s duration works when total cascade time stays short (5 items × 0.1 s = 0.4 s total spread). With twenty cards, the same duration can make the tail end of the stagger feel sluggish because the total cascade time grows while individual animations remain the same length. sibling-count() helps scale the duration proportionally. Like the stagger delay, this rule belongs inside the @supports and @media guards shown in Step 4:

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-delay: calc(sibling-index() * 1s)) {
    .card-list .card {
      animation-name: fadeSlideUp;
      animation-timing-function: ease;
      animation-fill-mode: both;
      animation-delay: calc((sibling-index() - 1) * 0.1s);
      animation-duration: clamp(0.3s, calc(0.4s + sibling-count() * 0.02s), 0.8s);
    }
  }
}

clamp() prevents the duration from dropping below 0.3s or exceeding 0.8s, regardless of how many siblings exist. The 0.3 s floor prevents imperceptibly fast fades; the 0.8 s ceiling keeps animations under common “feels responsive” thresholds (see Nielsen Norman Group guidance on animation timing). A five-card list produces roughly 0.5s; a twenty-card list produces 0.8s (clamped). The combination of sibling-index() for delay and sibling-count() for duration creates a length-aware stagger whose total cascade time adapts to list size, all from pure CSS.

Step 4 — Full Production Block with Progressive Enhancement

Bringing it all together with feature detection and an accessibility guard for users who prefer reduced motion. This is the definitive @supports pattern; earlier code examples showed fragments of it for clarity.

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


.card-list .card {
  opacity: 1;
}


@media (prefers-reduced-motion: no-preference) {
  @supports (animation-delay: calc(sibling-index() * 1s)) {
    :root {
      --delay-step: 0.1s;
      --base-duration: 0.4s;
      --duration-step: 0.02s;
    }

    .card-list .card {
      opacity: 0;
      will-change: transform, opacity;
      animation-name: fadeSlideUp;
      animation-timing-function: ease;
      animation-fill-mode: both;
      animation-delay: calc((sibling-index() - 1) * var(--delay-step));
      animation-duration: clamp(
        0.3s,
        calc(var(--base-duration) + sibling-count() * var(--duration-step)),
        0.8s
      );
    }
  }
}

This block is copy-paste ready. Unsupported browsers show static, visible cards. Users who have requested reduced motion also see static cards with no animation. Supported browsers with no motion preference get the full staggered entrance with adaptive timing.

Always respect prefers-reduced-motion. Because this tutorial is animation-focused, wrapping animation declarations inside @media (prefers-reduced-motion: no-preference) is essential for accessibility. Users with vestibular disorders or motion sensitivity should not receive unwanted animations. This aligns with WCAG 2.1 Success Criterion 2.3.3 and widely accepted accessibility best practices.

Beyond Staggering: Advanced Patterns

Dynamic Color Distribution

.tag-cloud .tag {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 2em;
  color: white;
  font-weight: 600;
  background-color: hsl(
    calc(360 / sibling-count() * (sibling-index() - 1)),
    65%,
    50%
  );
}

The hsl() color distribution pattern scales to any context where items need visually distinct, evenly spaced colors. With eight tags, each receives a hue 45 degrees apart. With twelve, 30 degrees apart. Subtracting 1 from sibling-index() ensures the first tag starts at 0 degrees (red) rather than skipping it.

Accessibility note: At certain hue angles (particularly yellows around 60° and cyans around 180°), color: white on a background with lightness 50% may not meet WCAG AA contrast requirements (4.5:1 ratio). Test your specific tag count for contrast compliance, or consider using a dark text color with a higher lightness value, or the emerging color-contrast() function where supported.

Responsive Grid Sizing with sibling-count()

sibling-count() can inform layout decisions. For equal-width flex children that adapt to item count without media queries, use a custom property to keep the gap value in sync between the container and the formula:

.flex-container {
  --gap: 1rem; 
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.flex-child {
  flex-basis: calc(
    (100% - (sibling-count() - 1) * var(--gap)) / sibling-count()
  );
}

If your container uses gap, you must subtract the total gap space from 100% before dividing; otherwise the children will overflow the container. The --gap custom property ensures the gap value used in the formula always matches the container’s actual gap. Combining this with container queries produces components that respond to both their container width and their own item count, a degree of intrinsic responsiveness that previously required JavaScript.

Z-Index Stacking and Overlapping Card Layouts

For overlapping avatar rows or deck-of-cards interfaces, natural stacking order can be achieved with z-index: calc(sibling-count() - sibling-index() + 1). The first element receives the highest z-index, and each subsequent sibling stacks behind it. The + 1 ensures the last sibling receives a minimum z-index of 1 rather than 0, which avoids potential stacking issues with external elements. Reversing the math (z-index: sibling-index()) flips the order. No hardcoded values, no JavaScript.

Combining with CSS Scroll-Driven Animations

Pairing sibling-index() with animation-timeline: view() opens up scroll-triggered staggers. Each sibling can enter the viewport with a delay offset derived from its position, creating a cascading reveal as the user scrolls. This combination enables per-element scroll-triggered stagger without JS observers, something no prior CSS-only approach could achieve.

This combination enables per-element scroll-triggered stagger without JS observers, something no prior CSS-only approach could achieve.

Note: animation-timeline: view() has its own browser support requirements. Check browser compatibility independently before combining it with sibling-index().

Performance Considerations

The browser’s style engine resolves both sibling-index() and sibling-count() during style resolution. No JavaScript executes, and evaluating these functions triggers no reflow. This stands in contrast to the common MutationObserver plus inline style approach, which runs JavaScript on the main thread and forces the browser to recalculate styles and re-lay-out elements for every observed mutation.

For deeply nested structures or extremely large sibling lists (1,000+ items), no independent benchmark data exists at time of publication. Both functions derive their values from existing DOM tree data, but that does not guarantee negligible cost on low-end hardware. Profile style-recalc time in DevTools on your target devices rather than assuming performance is free.

When animating opacity and transform on many elements simultaneously, adding will-change: transform, opacity inside the @supports block (as shown in Code Example 8) helps the browser promote elements to compositor layers upfront, reducing first-frame jank on lower-end hardware.

Common Pitfalls and Gotchas

1-based, not 0-based. sibling-index() starts at 1. Subtract 1 explicitly for zero-based math.

Scoped to direct siblings only. These functions count children of the immediate parent. They do not traverse deeper nesting. Implementations currently define Shadow DOM behavior with slotted content differently. Test explicitly in your target browser before relying on this behavior in production Web Components. Wrapper

SitePoint Team

Sharing our passion for building incredible internet things.