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

Interactive Demo

Hover over me
to see transition.

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

<div class="test" > 5s </div> 
<div class="test2" > 2s </div>
<div class="test3"> 400ms </div>
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;  
} 

Browser Support

The following table will show you the current browser support for the CSS transition-duration property.

Desktop
Edge Chrome Firefox Opera Safari
12261612.19
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
261612.191.54.4

Last updated by CSSPortal on: 2nd January 2024