Timing Functions

Take it Eeeeeasy - Time Bender

Same distance. Same duration.
RADICALLY different vibes.

Welcome to the personality layer of motion.

Timing functions are how we tell the browser how to move through time — chill, snappy, floaty, mechanical, or unhinged.

It’s all about the curves, and wrinkles, of the timeline.

---

🎚 The Easing Lineup

ease

Your default. Smooth start, smooth end.

transition-timing-function: ease;

linear

No acceleration. No deceleration.
Just… math.

transition-timing-function: linear;

ease-in

Slow at first, then rockets forward.

transition-timing-function: ease-in;

ease-out

Fast start, gentle finish.
Perfect for hover exits or UI elements that “land softly.”

transition-timing-function: ease-out;

ease-in-out

Slow → fast → slow.
The diplomat — great for general UI motion.

transition-timing-function: ease-in-out;

---

🧪 Custom Curves · cubic-bezier()

Want personality? This is where we craft it.

transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

That one overshoots hard.
Try a few more:

/* Smooth */
cubic-bezier(0.25, 0.1, 0.25, 1);

/* Snappy */
cubic-bezier(0.4, 0, 0.2, 1);

/* Dramatic overshoot */
cubic-bezier(0.7, -0.5, 0.3, 1.4);

Every curve tells a story.

---

Curve lineup + bunny hops

Six curves, five vibes. Hover each card to feel the difference.

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier

📘 How timing functions work

🧠 These curves don’t show position — they show time

The graph isn’t the bunny’s path.
It’s the pace of the motion — how quickly or slowly the animation moves through time.

That’s why:

• A steep curve = fast moment
• A flat curve = slow moment
• Ease-in starts slow
• Ease-out ends slow
• Ease-in-out slows at both ends
• Custom cubic-beziers can overshoot, bounce, or snap

The transform defines where the bunny goes.
The timing function defines how it feels getting there.

---

➡️ Next page: Steps Timing — step-start, step-end, steps(n), and time-slicing magic.