One staggered page load

One staggered entrance beats scattered micro-interactions.

From frontend-design, Motion. This page loads that way.

All at once vs in sequence

Press Replay. Same keyframe, only the delays differ.

Everything at onceBad
animation-delay: 0ms
StaggeredGood
animation-delay: calc(var(--i) * 60ms)
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}
.reveal {
  animation: rise 300ms cubic-bezier(.23, 1, .32, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  @keyframes rise { from { opacity: 0; } }
}

Stagger tuner

Set a step, then Replay. Aim for 60 to 100ms.

Your entranceOrchestrated

Scattered vs focused

Add loops on the left; replay the right.

Scattered loopsBad
Enter once, then stillGood
animation-iteration-count: 1
.hero > :nth-child(1) { --i: 0; }
.hero > :nth-child(2) { --i: 1; }
.hero > :nth-child(3) { --i: 2; }
.hero > * {
  animation: rise 300ms cubic-bezier(.23, 1, .32, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}

Why it matters, pros and cons

Why it matters

A sequence sets reading order; scattered effects fight for one glance.

Pros

  • Sets reading order without copy.
  • CSS only: one keyframe, one index.
  • Runs once, then the page is still.

Cons

  • Every step delays content; land the last under 1s.
  • Skip it in tools opened many times a day.
  • Stagger the first screen only, never long lists.