← Back to Lesson

⏱️ Staggered Animations

Create choreographed sequences by delaying animations for multiple elements. Perfect for list reveals, galleries, and progressive disclosure.

1. Fade In Up Cards

Cards appear one after another from bottom to top.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

.card {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
				

2. Scale Bounce In

Elements pop in with a bouncy scale animation.

@keyframes scaleBounce {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.bubble:nth-child(n) {
  animation-delay: calc(n * 0.1s);
}
				

3. Alternating Slide Directions

Odd items slide from left, even from right.

Item 1 (from left)

Item 2 (from right)

Item 3 (from left)

Item 4 (from right)

.row-item:nth-child(odd) {
  animation: slideFromLeft 0.6s forwards;
}
.row-item:nth-child(even) {
  animation: slideFromRight 0.6s forwards;
}
.row-item:nth-child(n) {
  animation-delay: calc(n * 0.1s);
}
				

4. Rotating Entrance

Icons rotate in with staggered timing.

🎨

⚡

🚀

✨

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
.icon-box:nth-child(n) {
  animation-delay: calc(n * 0.15s);
}
				

5. Progressive Bar Loading

Progress bars grow in sequence.

HTML/CSS - 95%

JavaScript - 85%

Design - 90%

Animation - 80%

@keyframes barGrow {
  from { width: 0; opacity: 0; }
  to { width: 100%; opacity: 1; }
}
.progress-bar:nth-child(n) {
  animation-delay: calc((n - 1) * 0.2s);
}
				

💡 Key Takeaways

Core technique: Use animation-delay with nth-child(n) selector
Calc function: animation-delay: calc(n * 0.1s) for automatic spacing
Initial state: Start with opacity: 0 and use forwards fill-mode
Timing: 0.1-0.2s delay between items works well for most cases
Use cases: List reveals, gallery loading, feature sections, onboarding flows