🕒 CSS transition-duration — Set the Speed of Your Transitions

The transition-duration property defines how long a CSS transition should take to complete from start to finish. It’s an essential part of creating smooth, responsive, and user-friendly interactions.

---

🔹 What Does transition-duration Do?

It determines how fast or slow a transition animation plays when a property changes — like color, size, opacity, or transform.

---

📘 Syntax

selector {
  transition-duration: <time> [, <time> ...];
}

• <time> is in seconds (s) or milliseconds (ms)
• You can list multiple durations if you’re transitioning multiple properties

---

✍️ Basic Example: Smooth Button Hover

.button {
  background-color: #3498db;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: #2ecc71;
}

✅ The background color fades over 0.5 seconds when hovered.

---

🧪 Using transition-duration with transition-property

.card {
  transition-property: transform, box-shadow;
  transition-duration: 0.3s, 0.6s;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

✅ The transform runs for 0.3s, the box-shadow for 0.6s.

---

🖼️ Image Idea: Animation Speed Comparison

Transition Duration	Result
0s	Instant (no animation)
0.2s	Quick fade (barely noticeable)
0.5s	Smooth and standard speed
1s	Slow and relaxed

🎯 Image could show colored boxes fading in at different speeds.

---

💡 Pro Tips

• Combine with transition-timing-function for control over animation flow
• Use milliseconds (ms) for shorter effects: 100ms, 200ms
• Use seconds (s) for longer effects: 0.5s, 1s, 2s
• The default value is 0s (i.e., no animation)

---

🎨 Good UX Guidelines

Effect Type	Recommended Duration
Button hover	0.2s – 0.3s
Modal open/close	0.3s – 0.5s
Page fade	0.4s – 0.7s
Tooltips	0.1s – 0.2s

---

✅ Summary

Property	transition-duration
Purpose	Sets how long a transition runs
Values	Time in s or ms
Works with	transition, transition-property, :hover, etc.
Default	0s (instant change)

---

🔚 Final Thought

The transition-duration property is the tempo of your CSS animation. When used thoughtfully, it brings smoothness and elegance to your user interface, making interactions feel polished and intentional.