Combining Animations

A dash of this, a pinch of that.

Time to let Annie swing and hop.

A single animation is great.
Combining animations — either layered on the same element or orchestrated across multiple elements — is how we create cinematic motion.

---

🎛 Layering Animations on One Element

We can attach multiple animation tracks by comma-separating them:

.animation-stack {
  animation: float 3s ease-in-out infinite, glowPulse 1.4s ease-in-out infinite
      alternate;
}

Each animation runs independently.

• float controls position
• glowPulse controls color/opacity/shadow
• Both run in parallel

This is our “multi-track recording” moment.

---

🪜 Sequencing with Different Delays

One element, multiple animations, timed carefully:

.hero {
  animation: fadeIn 600ms ease-out 0ms forwards, popIn 400ms ease-out 300ms
      forwards;
}

Fade → then pop.
Simple, readable, powerful.

---

🧩 Orchestrating Multiple Elements

Animations don’t have to be stacked — they can be coordinated.

.star {
  animation: twinkle 2s ease-in-out infinite;
}

.comet {
  animation: streak 1.2s linear 400ms infinite;
}

.planet {
  animation: wobble 3s ease-in-out infinite;
}

Different durations.
Different easings.
Different delays.
One coherent scene.

---

🎬 Syncing Through Variables

Use CSS variables to keep timing locked:

:root {
  --orbit-dur: 4s;
}

.planet {
  animation: orbit var(--orbit-dur) linear infinite;
}

.moon {
  animation: orbit var(--orbit-dur) linear infinite reverse;
}

Both celestial bodies stay in perfect sync even as we tweak the timing globally.

More on CSS Variables in the next lesson…

---

🐾 Annie’s Combo Lab

Hover Annie to see three animations layered on the same element — float, glow, and spin working together.

Below her, the star, comet, and planet run independent tracks to show orchestration across elements.

---

➡️ Next page: Triggering Animations — classes, events, scroll, visibility, and controlled playback.