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
10	12	26	16	12.1	9
Tablets / Mobile
4.4	26	16	12.1	9	1.5

Last updated by CSSPortal on: 2nd November 2019