The transition-duration property determines how long a CSS transition takes to go from the start state to the end state when an animatable property changes. It does not itself choose which properties animate — it only controls the time dimension of the animation once a change is triggered. Because it governs timing only, the perceived smoothness and purpose of a transition are shaped heavily by the value you give to this property: very short values make changes feel instantaneous, while longer values emphasize motion and can draw attention to the change.

In practice, transition-duration is used together with other transition-related properties to build a complete transition behavior. For example, you commonly set it as part of the transition shorthand, and you pair it with transition-timing-function (which controls the easing curve) and transition-delay (which defers when the transition starts). Which CSS properties actually animate is determined by transition-property; if a property is not animatable, adjusting transition-duration will have no effect on that change.

When choosing durations, consider both user experience and performance. Short durations are appropriate for micro-interactions (button feedback, hover highlights) to keep interfaces snappy; longer durations can be useful to reveal or guide attention during larger layout changes but may slow perceived responsiveness. Also be mindful of rendering cost: animating certain properties can force layout or paint work and lead to jank if the duration encourages continuous updates on low-powered devices. Finally, respect user preferences such as reduced-motion settings — when motion should be minimized, it’s common to effectively disable or shorten transitions so they do not interfere with accessibility needs.