CSS Property transition-duration








The transition-duration property defines the duration of a specified transition. 

.example {
    transition-duration: 3s;
}

Summary

Initial value
0
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.transitionDuration="1s"
Animatable
no

CSS Syntax

transition-duration: time;

Property Values

time
set how many seconds or milliseconds a transition effect takes to complete. Default value is 0, meaning no effect




Browser compatibility

transition-duration Yes 10.0 Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<style>
.box {<!--  w  w  w .j a v  a2  s .  c  om-->
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.box:hover {
  background-color: lightblue;
  cursor: pointer;
}

.uni {
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}
</style>
</head>
<body>
<div class="box uni"></div>
</body>
</html>

Click to view the demo