⏱️ CSS transition-timing-function — Control the Animation Curve

The transition-timing-function defines the speed curve of a transition, i.e., how fast or slow a property changes at different points in time. It controls the feel of your animation — whether it’s snappy, smooth, bouncy, or relaxed.

---

📘 Syntax

selector {
  transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | steps(n, direction);
}

• Use named values for simplicity
• Use cubic-bezier() for custom curves
• Use steps() for choppy, frame-by-frame animations

---

🔹 Common Timing Functions

Function	Description	Feel
linear	Constant speed from start to finish	🟢 Robotic, steady
ease	Starts slow, speeds up, slows down (default)	🌙 Natural, smooth
ease-in	Starts slow, then speeds up	🚀 Accelerating
ease-out	Starts fast, then slows down	🛬 Decelerating
ease-in-out	Starts & ends slow, speeds up in the middle	🌊 Balanced and calm
cubic-bezier	Fully custom animation curve	🎨 Tailor-made timing
steps(n)	Jumps in n steps instead of smooth transition	🎞 Frame-based animation

---

✍️ Example: Ease vs Linear

.box {
  transition: transform 1s;
}

.box.ease {
  transition-timing-function: ease;
}

.box.linear {
  transition-timing-function: linear;
}

✅ Both boxes animate in 1 second — but one eases, the other moves evenly.

---

🖼️ Image Idea: Animation Curve Graphs

A visual chart showing curves for:

• ease
• linear
• ease-in
• ease-out
• ease-in-out

🎯 Purpose: Show how the speed varies over time for each function.

---

🔍 Custom cubic-bezier() Function

.card {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

✅ This creates a bounce effect (springy animation).

You can use tools like cubic-bezier.com to design your own timing functions visually.

---

🧪 steps() for Discrete Transitions

.loader {
  transition: background-position 1s steps(4, end);
}

✅ Creates a stepped animation, like a sprite or countdown.

---

💡 Best Use Cases

UI Element	Recommended Timing Function
Buttons	ease-in-out, ease
Modals/overlays	ease-out, cubic-bezier
Tooltips	ease-in, ease-out
Loaders/sprites	steps()

---

✅ Summary

Property	transition-timing-function
What it controls	The pace or rhythm of an animation
Default value	ease
Other values	linear, ease-in, ease-out, steps(), etc.
For advanced control	Use cubic-bezier()

---

🔚 Final Thought

The transition-timing-function gives your animations personality. Whether you want subtle, punchy, playful, or cinematic effects — it all depends on how time flows across the animation.

---