transition-duration defaults to 0s, meaning a transition, even with a valid transition-property specified, completes instantly with no visible animation at all unless a nonzero duration is explicitly set — this is one of the most common reasons a transition appears to not be working at all, simply forgetting to specify any duration. Multiple comma-separated duration values can be specified when transition-property lists multiple properties, matching each duration to its corresponding property in the same order they're listed.

1Understanding Transition-duration

💡

A transition with no explicit transition-duration set defaults to 0s, meaning the change happens instantly with zero visible animation — an easy, extremely common oversight when a transition otherwise looks correctly configured but simply appears to do nothing at all.

editor.html

.box {
  transition-property: opacity;
  transition-duration: 0.5s;
}

localhost:3000

2Practical Example

Here is a real-world application of Transition-duration showing how it is used in production CSS code.

editor.html

.box {
  transition-property: opacity;
  /* transition-duration omitted, defaults to 0s */
}

localhost:3000

3Best Practices

Follow these guidelines when working with Transition-duration:

1. Always specify an explicit transition-duration, since its default of 0s produces no visible animation at all even with everything else correctly configured

2. Keep most UI transitions relatively short, typically in the 150ms to 400ms range, since longer durations can start to feel sluggish or unresponsive for everyday interface interactions

3. Match multiple comma-separated duration values to their corresponding properties in the same order when transitioning several different properties with different intended speeds

⚠️

Tip: A transition with no explicit transition-duration set defaults to 0s, meaning the change happens instantly with zero visible animation — an easy, extremely common oversight when a transition otherwise looks correctly configured but simply appears to do nothing at all.

editor.html

.box {
  transition-property: opacity;
  transition-duration: 0.5s;
}

localhost:3000

Examples

Example 01Basic Usage

.box {
  transition-property: opacity;
  transition-duration: 0.5s;
}

Example 02Advanced Example

.box {
  transition-property: opacity;
  /* transition-duration omitted, defaults to 0s */
}

Best Practices

Always specify an explicit transition-duration, since its default of 0s produces no visible animation at all even with everything else correctly configured
Keep most UI transitions relatively short, typically in the 150ms to 400ms range, since longer durations can start to feel sluggish or unresponsive for everyday interface interactions
Match multiple comma-separated duration values to their corresponding properties in the same order when transitioning several different properties with different intended speeds

Interview Question

Why might a developer correctly set transition-property but still see absolutely no visible animation at all when that property changes?▼

Hint: Think about transition-duration's own default value, and whether a transition can produce any visible animation at all with that default left unchanged.

transition-property alone only specifies which property should be watched and animated when it changes, it says nothing at all about how long that animation should actually take, that's specifically transition-duration's job, and transition-duration's own default value is 0 seconds, meaning zero time is allotted for the transition to actually play out. A transition that's technically configured correctly in every other respect, but left with this default zero duration, still detects the property change and technically still transitions, it just does so instantaneously, completing the entire, extremely short animation within a single rendering frame, which is visually indistinguishable from the property simply changing instantly with no animation at all. This is exactly why forgetting to specify a nonzero transition-duration is such a common cause of a transition seeming to silently do nothing, when in fact every other part of the transition setup, like transition-property, might already be entirely correct, just missing this one essential timing value.

Exercises

MediumPractice using Transition-duration in a real scenario.

View Solution

.box {
  transition-property: opacity;
  transition-duration: 0.5s;
}

Frequently Asked Questions

Why might a developer correctly set transition-property but still see absolutely no visible animation at all when that property changes?▼

Related Functions

TransitionTransition-timing-functionTransition-delay