Javascript Reference - HTML DOM Style transitionProperty Property

The transitionProperty property gets and sets the target CSS property for the transition effect.

Browser Support


`transition`	Yes	10.0	Yes	Yes (WebkitTransitionProperty)	Yes

Syntax

Return the transitionProperty property:

var v = object.style.transitionProperty

Set the transitionProperty property:

object.style.transitionProperty='none|all|property|initial|inherit'

Property Values

Value	Description
none	Apply to nothing in transition effect
all	Default value. Apply to all properties in a transition effect
property	Apply a comma separated list of CSS property in transition effect
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

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

Example

The following code shows how to hover a div element to change its size.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w w  w.j  a va 2s . c  om-->
    border: 1px solid red;
    background-color: blue;
    width: 200px;
    height: 100px;
    overflow: auto;
    -webkit-transition: all 2s; /* Safari 3.1 to 6.0 */
    transition: all 2s;
}

#myDIV:hover {
    background-color: coral;
    width: 500px;
    height: 200px;
    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.WebkitTransitionProperty = "width, height"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transitionProperty = "width, height";       // Standard syntax
}
</script>
</body>
</html>

The code above is rendered as follows: