CSS transition-duration Property

The CSS transition-duration property specifies how long a transition animation takes to complete when a CSS property changes. It determines the duration of the transition effect from start to finish.

• Controls the length of the transition animation.
• Accepts time values in seconds (s) or milliseconds (ms).
• A value of 0s (default) causes the transition to occur instantly.
• Different durations can be specified for multiple transitioning properties.

Syntax:

transition-duration: time | initial | inherit;

Property Values:

• time: Specifies the duration of the transition effect in seconds (s) or milliseconds (ms).
• initial: Sets the property to its default value, which is 0s.
• inherit: Inherits the transition-duration value from the parent element.

Examples of CSS transition-duration Property

Here are some example discussed:

Example 1: The transition-duration: 5s property smoothly increases the width of the green box from 100px to 300px over 5 seconds when hovered.

Output:

Example 2: The transition-duration: initial property resets the transition duration to its default value (0s), causing the width change to occur instantly when hovered.

Output:

Example 3: The inherit value makes the element inherit the transition-duration from its parent element. If no duration is defined on the parent, the default value (0s) is used.

Output: