transition-duration
The duration controls how long the transition takes. Values are in seconds (s) or milliseconds (ms). Typical UI transitions are 150–400ms.
CSS
Beginner
3 min read
Transition Duration
Example
.fast { transition-duration: 150ms; }
.normal { transition-duration: 300ms; }
.slow { transition-duration: 600ms; }
.very-slow { transition-duration: 1.5s; }
/* Multiple properties with different durations */
.card {
transition-property: transform, opacity;
transition-duration: 300ms, 200ms;
} Pro Tip
Keep UI feedback transitions under 300ms — longer transitions make interfaces feel sluggish.