Definition
The transition-duration CSS property is used to specify the duration or length of time it takes for a CSS transition to complete. It determines how long the transition effect lasts when a property change occurs on an element.
The transition-duration property accepts a time value or the 0s keyword:
- A time value specifies the duration in seconds (s) or milliseconds (ms) that the transition effect should take to complete. For example,
transition-duration: 0.5s;sets the transition duration to 0.5 seconds. - The
0skeyword indicates that there is no transition effect, meaning the property change occurs instantly without any visual transition.
Here’s an example:
.button {
transition-duration: 0.3s;
}
In this example, the .button class sets the transition-duration property to 0.3s, specifying that the transition effect should take 0.3 seconds to complete when a property change occurs.
It’s important to note that the transition-duration property is applied to individual properties being transitioned. If multiple properties have different transition durations, each property will have its own timing.
The transition-duration property is commonly used in combination with other transition-related properties, such as transition-property, transition-delay, and transition-timing-function. Together, these properties allow for the creation of smooth and controlled transitions between different states of an element.
By adjusting the transition duration, you can control the speed and timing of the transition effect. Shorter durations create faster transitions, while longer durations result in slower and more gradual changes.
Remember to consider the overall user experience and ensure that the transition duration is appropriate for the specific transition effect and the context in which it occurs. Very short durations can make the transition feel abrupt, while excessively long durations can cause delays and hinder the user experience.