Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Style transition Property


The HTML DOM Style transition property returns and modify the value of transition CSS property of an HTML element in an HTML document.

Syntax

Following is the syntax −

1. Returning transition

object.transition

2. Modifying transition

object.transition = “value”

Here value can be −

ValueExplanation
initialIt set this property value to its default value.
inheritIt inherits this property value from its parent element.
property duration timing-function delayHere, property represent the name of CSS property which would be transition.timing-function represent the speeding curve of the transition effect. delay represent when the transition effect will begin.

Let us see an example of HTML DOM Style transition Property:

Example

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem 0;
   }
   .circle {
      height: 100px;
      width: 100px;
      background-color: #db133a;
   }
   .circle:hover {
      height: 200px;
      width: 200px;
      border-radius: 50%;
   }
   .show {
      font-size: 1.2rem;
      margin: 1rem 0;
   }
</style>
<body>
<h1>DOM Style transition Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set Transition</button>
<div class="show">Now, hover on the square</div>
<script>
   function set() {
      document.querySelector('.circle').style.transition = "all 1s";
   }
</script>
</body>
</html>

Output

HTML DOM Style transition Property

Click on “Set Transition” button and then hover on the “red” square to see the transition effect.

HTML DOM Style transition Property