Transition-duration

CSS course · Intermediate · Lesson 60/98

Learn the transition duration with transition-duration.

transition-duration

transition-duration says how long the transition takes. The value is a time unit: seconds like 0.3s or milliseconds like 300ms. Shorter values mean faster transitions.

Without a duration the default is 0s; that means no transition at all, the value jumps instantly. So if you want a transition, you must give it a duration.

Seconds and milliseconds

Two time units are used: s (seconds) and ms (milliseconds). 1s = 1000ms. Pick either; when writing fractional seconds the leading zero can be dropped: .3s equals 0.3s.

Interfaces usually stay between 0.2s and 0.4s. Shorter and the eye barely catches it; longer and the user feels they are waiting.

Card hover color

A card should shift to a darker text color on hover. With transition-property: color and transition-duration: 0.4s the color flows over 0.4 seconds; the eye follows it smoothly.

0.4 seconds gives a relaxed tempo for long-form text. Faster and the eye misses it; slower and attention drifts.

Exercise Add a duration to the card transition

Add transition-duration: 0.4s to the .card rule. Then set color: tomato for .card:hover. On hover the text color should flow to tomato over 0.4 seconds.

Show example solution

.card {
  color: #1f2937;
  transition-property: color;
  transition-duration: 0.4s;
}

.card:hover {
  color: tomato;
}

Test yourself

What does transition-duration: 0.3s mean?
```
.card {
  transition-property: color;
  transition-duration: 0.3s;
}
```
- The transition completes in 0.3 seconds
- The transition starts after 3 seconds
- The transition repeats 0.3 times
- The transition lasts only 30 milliseconds
Show answer

The transition completes in 0.3 seconds — Correct. 0.3s means the transition runs from start to end in 0.3 seconds.

Make the card transition last 0.4 seconds

.card {
  transition-property: color;
  transition-duration: ____;
}

Show answer

.card {
  transition-property: color;
  transition-duration: 0.4s;
}

Match each duration to its feel

0.3s

Quick, under a quarter second
1s

A whole second
2s

Slow, easy to follow
0s

Instant, no transition

Transition-duration