transition Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transition

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

Description

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

  • transitionProperty
  • transitionDuration
  • transitionTimingFunction
  • transitionDelay.

Property Values

ValueDescription
transitionProperty name of the CSS property to have transition effect
transitionDuration during in seconds or milliseconds for transition to complete
transitionTimingFunction speed curve of the transition effect
transitionDelay Defines when the transition effect will start
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

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

Hover over a div element to gradually change its appearance:

Demo Code

ResultView the demo in separate window 

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

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

Related Tutorials