🎯 CSS transition-duration Property

The transition-duration property defines how long a transition effect takes to complete. It controls the speed of animations when CSS property values change.

Without this property, transitions happen instantly because the default duration is 0s.

The transition-duration property determines how long a transition animation lasts between two states.

• Controls animation speed
• Works with color, size, opacity, and more
• Can use seconds or milliseconds
• Essential for smooth UI transitions

You can define how long a transition takes using seconds (s) or milliseconds (ms).

.box {
    transition-duration: 0.5s;
}
                

.box {
    transition-duration: 300ms;
}
                

Smaller values create faster transitions, while larger values create slower and smoother animations.

Resets the property to its default value (0s).

.box {
    transition-duration: initial;
}
                

The following example shows a smooth opacity transition.

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

.box:hover {
    opacity: 0.5;
}
                

When hovered, the opacity changes smoothly over 0.3 seconds instead of changing instantly.

The transition-duration property is essential for controlling animation speed and creating smooth UI effects.

• Control animation timing precisely
• Create smooth transitions
• Improve user experience
• Enhance modern UI design
• Prevent abrupt visual changes