CSS3 transition-duration Property

Here is the brief explanation on how to specify the duration of transition effect in CSS3.

Explanation

Property :

transition-duration: time|initial|inherit;

Where,
time - Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0s, means there will be no effect.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


transition-duration: 5s;

Definition:

The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

Example:
<style>
.demodiv:hover {
width: 300px;
}
.demodiv{
width: 100px;
height: 100px;
background: indigo;
transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */
}
</style>
<div class='demodiv'>
</div>


Consider another example:

Let the transition effect last for 4 seconds:

div {
-webkit-transition-duration: 4s; /* Safari */
transition-duration: 4s;
}

Result:



Ask Questions

Ask Question