Transition Sequence Initiate

Go this way, then that.

Rinse. Repeat.

Alright — time to make some pachyderms dance in order, without ever reaching for keyframes.

No JS. No keyframes. Just clean sequencing we can see and work with.

What we’ll cover:

• sequencing with transition-delay
• chaining multiple properties
• triggering whole groups with one hover

Lightweight. Powerful. Very “I meant to do that.”

---

🧠 The Sequencing Idea

A normal transition is one element changing over time.

Sequencing is many elements elephants changing over time — intentionally offset.

Two ways to do it:

1. Staggered siblings (same transition, different delays)
2. Chained properties (one element, multiple timed properties)

---

🪜 One Transition, One Heffalump

Baseline first. No delays yet.

.heffalump {
  transform: translateX(0);
  transition: transform 700ms ease-out;
}

.stage-1:hover .heffalump {
  transform: translate(240px, -50%);
}

---

🪜 Staggered Stompers (Avec Delay)

Same transition, different delays.
One hover, four launches.

.stage-2:hover .heffalump {
  transform: translate(240px, -50%);
}

.h1 {
  transition-delay: 0ms;
}
.h2 {
  transition-delay: 120ms;
}
.h3 {
  transition-delay: 240ms;
}
.h4 {
  transition-delay: 360ms;
}

---

🎛 Multi-Property Sequencing

Same astrodon. Two properties. Two beats. One Trunk.

.ps-multi .solo {
  opacity: 0.2;
  transform: translate(0, -50%) scale(0.8);
  transition: transform 400ms ease, opacity 250ms ease 180ms; /* fades later */
}

.ps-multi:hover .solo {
  opacity: 1;
  transform: translate(220px, -50%) scale(1);
}

---

🚀 Micro-Cascade

This is the “real UI” look — still hover-only.

• Pachyderm
• Heffalump
• Oliphaunt
• Astrodon

.ps-list-demo .item {
  opacity: 0;
  transform: translateY(12px);
  transition: transform 400ms ease, opacity 300ms ease;
}

.ps-list-demo:hover .item {
  opacity: 1;
  transform: translateY(0);
}

.ps-list-demo .i1 {
  transition-delay: 0ms;
}
.ps-list-demo .i2 {
  transition-delay: 80ms;
}
.ps-list-demo .i3 {
  transition-delay: 160ms;
}
.ps-list-demo .i4 {
  transition-delay: 240ms;
}

---

✅ The beat goes on…

Transition Sequencing gives us:

• a clean mental model for order
• a simple tool for staggering
• practice designing motion beats

Next up → Keyframe Annie Mation!!.