How does the stagger effect work without JavaScript?

Each item shares the same @keyframes animation, but a separate rule for every position — .stagger-item:nth-child(1), :nth-child(2), and so on — gives each one a slightly larger animation-delay. The result is every item running the identical animation, just starting a beat after the one before it.

What happens if I have more list items than generated nth-child rules?

Items beyond the generated count will still run the base .stagger-item animation, just with animation-delay: 0 (or whatever the last matched rule set), so they'll animate in sync with an earlier item instead of continuing the staggered sequence — regenerate with a higher item count to cover your real list length.

Can I use CSS custom properties instead of one rule per item?

Yes — a more scalable alternative is animation-delay: calc(var(--i) * 80ms) on .stagger-item, with style="--i: 3" set inline per item (or via a templating loop). This generator outputs explicit nth-child rules instead because they're copy-paste-ready with zero markup changes required.

Why does my list replay instantly instead of staggering on page load?

CSS animations with both keyword only hold the 'to' state after finishing if the element existed before the animation started — if your items are added to the DOM dynamically (e.g. via JS after fetch), the animation-delay still works the same way relative to when each element is inserted and painted.

Does this tool store or upload anything?

No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.

CSS STAGGER ANIMATION GENERATOR

Animate a list in sequence with generated nth-child delays, and copy the CSS.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Items: 6Delay per item: 80msDuration: 450ms

Effect

Color

.stagger-item {
  animation: stagger-fade-up 450ms ease both;
}

.stagger-item:nth-child(1) {
  animation-delay: 0ms;
}

.stagger-item:nth-child(2) {
  animation-delay: 80ms;
}

.stagger-item:nth-child(3) {
  animation-delay: 160ms;
}

.stagger-item:nth-child(4) {
  animation-delay: 240ms;
}

.stagger-item:nth-child(5) {
  animation-delay: 320ms;
}

.stagger-item:nth-child(6) {
  animation-delay: 400ms;
}

@keyframes stagger-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

How to use the stagger animation

1
Pick the number of items and an entrance effect (fade-up, scale-in, slide-left, or fade).
2
Tune the per-item delay and animation duration with the sliders.
3
Hit Replay to re-run the sequence.
4
Copy the CSS and HTML and apply the .stagger-item class to each item in your list.

Questions

How does the stagger effect work without JavaScript?: Each item shares the same @keyframes animation, but a separate rule for every position — .stagger-item:nth-child(1), :nth-child(2), and so on — gives each one a slightly larger animation-delay. The result is every item running the identical animation, just starting a beat after the one before it.
What happens if I have more list items than generated nth-child rules?: Items beyond the generated count will still run the base .stagger-item animation, just with animation-delay: 0 (or whatever the last matched rule set), so they'll animate in sync with an earlier item instead of continuing the staggered sequence — regenerate with a higher item count to cover your real list length.
Can I use CSS custom properties instead of one rule per item?: Yes — a more scalable alternative is animation-delay: calc(var(--i) * 80ms) on .stagger-item, with style="--i: 3" set inline per item (or via a templating loop). This generator outputs explicit nth-child rules instead because they're copy-paste-ready with zero markup changes required.
Why does my list replay instantly instead of staggering on page load?: CSS animations with both keyword only hold the 'to' state after finishing if the element existed before the animation started — if your items are added to the DOM dynamically (e.g. via JS after fetch), the animation-delay still works the same way relative to when each element is inserted and painted.
Does this tool store or upload anything?: No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.