Javascript DOM CSS Style transition Property

Introduction

Hover over a div element to gradually change its appearance: 

document.getElementById("myDIV").style.transition = "all 2s";

Click the button and mouse over the DIV element again.

The change will now happen gradually, like an animation:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from  w  ww.j a  va  2  s .com*/
  border: 1px solid black;
  background-color: lightblue;
  width: 270px;
  height: 200px;
  overflow: auto;
}

#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.transition = "all 2s";
}
</script>

</body>
</html>

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

  • transitionProperty
  • transitionDuration
  • transitionTimingFunction
  • transitionDelay.

We should always set the transitionDuration property, otherwise the duration is 0, and the transition will have no effect.

Property Values

ValueDescription
transitionProperty Set the name of the CSS property the transition effect is for
transitionDuration Set how many seconds or milliseconds the transition takes to complete
transitionTimingFunction Set the speed curve of the transition effect
transitionDelay Set when the transition effect will start
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The transition property Default Value: all 0 ease 0

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




PreviousNext

Related