Javascript Reference - HTML DOM Style transitionDuration Property

The transitionDuration property sets or gets how long in seconds (s) or milliseconds (ms) to complete a transition effect.

Browser Support


`transitionDuration`	Yes	10	Yes	Yes (WebkitTransitionDuration)	Yes

Syntax

Return the transitionDuration property:

var v = object.style.transitionDuration

Set the transitionDuration property:

object.style.transitionDuration='time|initial|inherit'

Property Values

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

Technical Details

Default Value:	0
Return Value:	A string representing the transition-duration property
CSS Version	CSS3

Example

The following code shows how to speed up the transition effect.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from ww w  .  j ava 2 s. c o  m-->
    border: 1px solid black;
    background-color: lightblue;
    width: 270px;
    height: 200px;
    overflow: auto;
    -webkit-transition: all 5s; /* For Safari 3.1 to 6.0 */
    transition: all 5s;
}

#myDIV:hover {
    background-color: coral;
    width: 570px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">hover me</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitTransitionDuration = "1s"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transitionDuration = "1s";       // Standard syntax
}
</script>
</body>
</html>

The code above is rendered as follows: