Transition Basics

How we floe from here to there

Time to fire up the control panel, class.

These four pieces — property, duration, timing, and delay — are the entire transition engine.

Everything else builds from here.

---

🎛 The Four Parts of a Transition

1. Property

What is allowed to interpolate?

transition-property: transform;

You can target one property, multiple, or all (but we’ll talk about why “all” is spicy later).

---

2. Duration

How long the ride takes.

transition-duration: 300ms;

Short durations feel snappy.
Long durations feel cinematic (or sluggish — use wisely).

---

3. Timing Function

How the motion feels — linear, snappy, bouncy, chill.

transition-timing-function: ease-out;

We go deep on timing functions in the next chapters.

---

4. Delay

How long must we wait before the action begins.

transition-delay: 0.1s;

Used sparingly, delay can make interactions feel intentional.
Used poorly, it feels like laggy lag lag lag.
Use delay VERY intentionally.

---

🧩 Shorthand (Most Common Form)

transition: transform 300ms ease-out 0s;

Property → Duration → Timing → Delay.
Clean, compact, predictable.

---

🧲 Hover + Transition = Basic Motion

.ps--space-wabbit {
  width: 26%;
  transform: translateY(100px) scale(1);
  transition: transform 500ms ease-out;
}

.ps--space-wabbit:hover .ps-space-wabbit {
  transform: translateY(-500px) scale(3);
}

This is the “UI feels alive” effect, taken to an epic Professor Solo extreme — powerful, BIG fun.

---

Bunny Hop (Hover)

---

➡️ Next page: Timing Functions — ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier magic.