Javascript DOM CSS Style transitionDuration Property

Introduction

Speed up the transition effect:

document.getElementById("myDIV").style.transitionDuration = "1s";

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//www  . j  av  a2 s  .c  om
  border: 1px solid black;
  background-color: lightblue;
  width: 270px;
  height: 200px;
  overflow: auto;
  transition: all 5s;
}

#myDIV:hover {
  background-color: coral;
  width: 570px;
  height: 500px;
  padding: 100px;
  border-radius: 50px;
}
</style>
</head>
<body>

<p>Mouse over the DIV element and it will change, both in color and size!</p>
<button onclick="myFunction()">Test</button>
<div id="myDIV">
  <h1>myDIV</h1>
</div>

<script>
function myFunction() {
  document.getElementById("myDIV").style.transitionDuration = "1s";
}
</script>

</body>
</html>

The transitionDuration property sets or gets how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

Property Values

Value	Description
time	Set seconds or milliseconds a transition takes to complete. 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.

The transitionDuration property Default Value: 0

The transitionDuration property returns a String representing the transition-duration property of an element.

Previous Next