Javascript DOM CSS Style transitionProperty Property

Introduction

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

document.getElementById("myDIV").style.transitionProperty = "width,height";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/* w  w w  .j  av  a2s .  co  m*/
  border: 1px solid black;
  background-color: lightblue;
  width: 270px;
  height: 200px;
  overflow: auto;
  transition: all 2s;
}

#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, gradually, 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.transitionProperty = "width, height";
}
</script>

</body>
</html>

The transitionProperty property sets the name of the CSS property the transition effect is for.

A transition effect could occur when a user hover over an element.

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

Property Values

ValueDescription
none No property will get a transition effect
all Default. 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.

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




PreviousNext

Related