CSS transition-duration Property

Description

The transition-duration property sets the time, in seconds or milliseconds, how long the transition animation should last before it is completed. By default, the value is 0s, which means that there is no animation, the transition occurs instantly.

Initial value
0s
Applies to
All elements, :before and :after pseudo elements
Inherited
No
Media
Interactive
Computed value
Same as specified value
Animatable
No
CSS Version
CSS3
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

<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

Desktop
Explorer Edge Chrome Firefox Opera Safari
1012261612.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37261612.19Yes

Last updated by CSSPortal on: 2nd November 2019