transitionDuration Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transitionDuration

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

Description

The transitionDuration property sets or gets how long to complete a transition.

Property Values

Value Description
timehow many seconds or milliseconds to finish a transition. Default value is 0, meaning there will be no effect
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

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

Speed up the transition effect:

Demo Code

ResultView the demo in separate window 

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

#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.WebkitTransitionDuration = "1s"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transitionDuration = "1s";       // Standard syntax
}
</script>
</body>
</html>

Related Tutorials