Multi-Step Animations

Step 2, 3, Step, 2, 3, Dip

Now we level up - again.

We’ve seen simple 0% → 100% transitions.

But the real magic happens when we break the journey into multiple beats, each with its own personality.

Multi‑step animations let us:

Stage reveals
Build anticipation
Add overshoots and rebounds
Create “stories” inside motion
Sync transforms, color shifts, opacity, and more

This is where AnnieMation takes the dancefloor.

🎭 Three‑Beat Example

@keyframes revealBoom {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-8deg);
  }
  40% {
    opacity: 1;
    transform: scale(1.05) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

Small → big → settle.
Tension → anticipation → release.

🎚 Complex Motion Arc

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  25% {
    transform: rotate(90deg) translateX(20px);
  }
  50% {
    transform: rotate(180deg) translateX(0);
  }
  75% {
    transform: rotate(270deg) translateX(-20px);
  }
  100% {
    transform: rotate(360deg) translateX(0);
  }
}

This establishes rhythm — a repeatable pattern of motion, not just a spin.

🧩 Coordinate Multiple Properties

Opacity, transforms, shadows, colors — all can live inside the same arc.

@keyframes glowLift {
  0% {
    opacity: 0;
    transform: translateY(12px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

That’s animation as design language.

🎞 Staging & Beats

Multi‑step animation is the CSS equivalent of:

mise‑en‑scène
blocking
acting beats
rhythm
choreography

Every step adds clarity.

🐾 Annie’s Beat Track

Hover the stage and watch Annie hit each beat — crouch → launch → flip → land.

➡️ Next page: Combining Animations — layering, syncing, and orchestrating multiple motion tracks.