HTML DOM Style transitionDuration Property


The HTML DOM Style transitionDuration property returns and modify the duration of transition effect on an element in seconds(s) or milliseconds(ms) in an HTML document.

Syntax

Following is the syntax −

1. Returning transitionDuration

object.transitionDuration

2. Modifying transitionDuration

object.transitionDuration = “value”

Here value can be −

ValueExplanation
initialIt set this property value to its default value.
inheritIt inherits this property value from its parent element.
timeIt represents the duration of a transition effect in seconds(s) or milliseconds(ms).

Example

Let us see an example of HTML DOM Style transitionDuration Property −

Live Demo

<!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%;
      transition: all 1s;
   }
   .show {
      font-size: 1.2rem;
      margin: 1rem 0;
   }
</style>
<body>
<h1>DOM Style transitionDuration Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Change Transition</button>
<div class="show">Now, hover on the square</div>
<script>
   function set() {
      document.querySelector('.circle').style.transitionDuration = "5s";
   }
</script>
</body>
</html>

Output

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

Updated on: 17-Feb-2021

22 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements