⏱️ CSS Tutorial: transition-duration

📌 Introduction

The transition-duration property in CSS defines **how long** a transition animation should take to complete. It works together with transition-property, transition-timing-function, and transition-delay. A smooth duration helps create polished UI animations like button hovers, menu reveals, fades, and sliding effects. ✨

🎯 What Does transition-duration Do?

  • Controls the length of the animation
  • Accepts time units: s (seconds) and ms (milliseconds)
  • Can define different durations for multiple properties
  • Used with hover, active, focus, class changes, and JS animations

✨ Syntax

Syntax

selector {
  transition-duration: <time> | <time-list>;
}

Examples of time units:

  • 0.3s → 300ms
  • 150ms → 0.15s

Note

If you specify multiple properties in transition-property, you can specify multiple durations in the same order.

🧩 Basic Examples

1. Smooth Hover Animation

Button Hover

button {
  transition-property: background-color;
  transition-duration: 0.3s;
}

button:hover {
  background-color: #4f46e5;
}

2. Using Milliseconds

Milliseconds

.fade-box {
  transition-duration: 500ms;
}

3. Multiple Durations for Multiple Properties

Multiple Durations

.box {
  transition-property: opacity, transform;
  transition-duration: 300ms, 600ms;
}

🔥 Practical UI Examples

1. Fade In Text

Fade Animation

.text {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.text.show {
  opacity: 1;
}

2. Slide Up Animation

Slide

.panel {
  transform: translateY(20px);
  opacity: 0;
  transition-duration: 0.5s;
  transition-property: transform, opacity;
}

.panel.open {
  transform: translateY(0);
  opacity: 1;
}

3. Grow Effect

Grow Effect

.grow {
  transition: transform 0.2s ease-in-out;
}

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

📊 transition-duration Comparison Table

DurationEffect
100msVery fast (tooltip flicks, small UI)
200–300msIdeal for buttons & hover effects
400–600msSmooth fades, sliding panels
800ms+Dramatic animations, modals

🧠 Tips & Best Practices

  • Don’t overuse long durations—they slow the UI
  • Use 200–300ms for most hover interactions
  • Use longer durations for modals, drawers, and page transitions
  • Use transition: all carefully—it may animate unwanted properties
  • Combine transition-duration with easing for natural feeling animations (ease, ease-in, ease-out)
>>“Great UI animations are invisible—smooth, fast, and enhance the experience.” ✨

🎉 Conclusion

The transition-duration property defines how long an animation takes, making it one of the key ingredients of smooth and modern UI motion. Mastering durations—along with timing functions and delays—helps you craft interactive experiences that feel natural and polished. Use it wisely, and your interfaces will come alive beautifully. 🚀