animation

CSS Staggered List Animation

Make list items appear one after another with cascading delays using nth-child animation-delay.

Staggered animations create a sense of sequenced reveal — each item enters slightly after the previous one. The CSS-only approach uses :nth-child() selectors to apply incremental animation-delay values. For dynamic lists where the item count is unknown, a small JavaScript loop applies the delays as inline styles.

Live CSS Editor

CSS

Preview

/* Staggered list animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CSS-only approach — works for fixed-count lists */
.stagger-list > * {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.stagger-list > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger-list > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger-list > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger-list > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger-list > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger-list > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger-list > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-list > *:nth-child(8)  { animation-delay: 0.40s; }

/* JS-driven approach — works for any number of items */
/*
document.querySelectorAll('.stagger-list > *').forEach((el, i) => {
  el.style.animationDelay = (i * 0.06) + 's';
});
*/

/* Grid stagger variant */
.stagger-grid > * {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.stagger-grid > *:nth-child(3n+1) { animation-delay: 0.05s; }
.stagger-grid > *:nth-child(3n+2) { animation-delay: 0.12s; }
.stagger-grid > *:nth-child(3n)   { animation-delay: 0.19s; }

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .stagger-list > *, .stagger-grid > * {
    animation: none;
  }
}

Edit CSS → see live previewTab = 2 spaces

Usage Note

Keep individual delays under 60ms for lists with many items — longer delays make the last items feel unresponsively slow. The JS approach is better for dynamic content where the number of items changes at runtime.