CSS transition-duration Property

Description

The transition-duration CSS property specifies the amount of time it takes for a CSS property to change from its initial state to its final state when a transition effect is applied. It is part of the broader CSS transition property and plays a crucial role in creating smooth and visually appealing animations and transitions on web elements. By defining a specific duration in seconds or milliseconds, web developers can control the speed at which changes occur, allowing for gradual and controlled transitions in response to user interactions or other events, enhancing the overall user experience on websites and applications.

Initial value: 0s
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: Same as specified value
Animatable: No
JavaScript syntax: object.style.transitionDuration

Syntax

transition-duration: <time> [, <time>]*

Values

<time>The amount of time the transition from the old value of a property to the new value should take. A time of 0s indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.

Example

HTML

<div class="test" > 5s </div> 

<div class="test2" > 2s </div> 

<div class="test3"> 400ms </div>

CSS

div {
   width: 70px;
   height: 70px; 
   background-color: yellow;
   border: 5px dashed black;
   display: inline-block; 
   margin-right: 15px; 
}
div:hover {
   height: 200px; 
}
.test { 
   transition-duration: 5s;  
}
.test2 { 
   transition-duration: 2s; 
}
.test3 { 
   transition-duration: 400ms;  
}

Result