Javascript Reference - HTML DOM Style transition Property

The transition property is a shorthand property for the four transition properties:

transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay

Browser Support


`transition`	Yes	10.0	Yes	Yes (WebkitTransition)	Yes

Syntax

Return the transitionProperty property:

var v = object.style.transition

Set the transitionProperty property:

object.style.transition="property duration timing-function delay|initial|inherit"

Property Values

Item	Description
transitionProperty	Set the name of the CSS property for the transition effect
transitionDuration	Set how many seconds or milliseconds the transition effect takes to complete
transitionTimingFunction	Set the speed curve of the transition effect
transitionDelay	Set when the transition effect will start

Technical Details

Default Value:	all
Return Value:	A String, representing the transition property of an element
CSS Version	CSS3

Example

The following code shows how to hover a div element to start a transition.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from   w w w . jav a 2s  . com-->
    border: 1px solid black;
    background-color: red;
    width: 270px;
    height: 200px;
    overflow: auto;
}
#myDIV:hover {
    background-color: blue;
    width: 570px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV"><h1>myDIV</h1></div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transition = "all 2s";       // Standard syntax
}
</script>
</body>
</html>

The code above is rendered as follows: