⏱️ CSS Tutorial: transition-timing-function

📌 Introduction

The transition-timing-function property controls the speed curve of a CSS transition — meaning how the animation accelerates or decelerates over time. Instead of moving at a constant speed, you can make transitions feel smooth, natural, snappy, or elastic. It is essential for creating polished UI animations. ✨

🎯 What Does It Do?

  • Controls easing (acceleration/deceleration)
  • Affects how transitions feel to the user
  • Supports keywords + custom cubic-bezier values
  • Enhances UX by making motion more organic

✨ Syntax

Syntax

selector {
  transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps() | cubic-bezier();
}

🧩 Built-in Easing Keywords

1. ease (default)

Smooth start + smooth end. Great for general UI transitions.

Code Snippet

transition-timing-function: ease;

2. linear

No acceleration — moves at constant speed. Best for loading bars.

Code Snippet

transition-timing-function: linear;

3. ease-in

Starts slow, ends fast. Good for entering animations.

Code Snippet

transition-timing-function: ease-in;

4. ease-out

Starts fast, ends slow. Good for UI exiting or hover-off animations.

Code Snippet

transition-timing-function: ease-out;

5. ease-in-out

Starts slow → speeds up → slows down again.

Code Snippet

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

6. step-start & step-end

Used for choppy or frame-by-frame effects.

Code Snippet

transition-timing-function: step-start;

7. steps(N, jump-type)

Makes the animation jump in discrete steps.

Code Snippet

transition-timing-function: steps(5, end);

🧩 Custom Easing: cubic-bezier()

For total control, you can define your own easing curve usingcubic-bezier(x1, y1, x2, y2). Values range from 0 → 1.

Cubic Bezier Example

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design */

🔥 Practical Examples

1. Hover Button Smooth Ease

Code Snippet

button {
  transition: background 0.3s ease;
}

button:hover {
  background: #4f46e5;
}

2. Linear Progress Bar

Code Snippet

.bar {
  width: 0;
  transition: width 2s linear;
}

3. Ease-out For Gentle Hover Exit

Code Snippet

.card {
  transition: transform 0.4s ease-out;
}

.card:hover {
  transform: scale(1.05);
}

4. Steps Animation

Code Snippet

.pixel {
  transition: filter 1s steps(4);
}

5. Custom Bezier Bounce-like Effect

Code Snippet

.bounce {
  transition: transform 0.6s cubic-bezier(.34,1.56,.64,1);
}

📊 Comparison Table

Timing FunctionBehavior
linearConstant speed
easeSmooth start & end
ease-inSlow → fast
ease-outFast → slow
ease-in-outSlow → fast → slow
steps()Choppy, discrete frames
cubic-bezier()Fully custom curve

🧠 Tips for Better Animations

  • Use ease-out for hover effects (it feels natural).
  • Use linear only for constant-speed animations.
  • Use ease-in for entrances.
  • Use cubic-bezier for branded motion or personality.
  • Use steps() for retro / pixel animations.
>>“Motion is communication — your timing curve defines how your interface feels.” ✨

🎉 Conclusion

The transition-timing-function property brings life and personality to your animations. With easing keywords, steps(), and custom cubic-bezier values, you gain full control over how elements animate — smooth, bouncy, snappy, or robotic. Master this property and your UI will feel polished, expressive, and delightful. 🚀