transitionProperty Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transitionProperty

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. transitionProperty

Description

The transitionProperty property links the CSS property to the transition effect.

Property Values

ValueDescription
none No property will get a transition effect
all Default value. All properties will get a transition effect
property Defines a comma separated list of CSS property names the transition effect is for
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: all
Return Value: A String, representing the transition-property property of an element
CSS VersionCSS3

Hover over a div element to gradually change its width and height:

Demo Code

ResultView the demo in separate window 

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

#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">
  <h1>myDIV</h1>
</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>

Related Tutorials