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: