Syntax error Set how many seconds or milliseconds a transition effect takes to complete.

Set how many seconds or milliseconds a transition effect takes to complete.

To set the duration for an effect to complete, use the transitionDuration property in JavaScript.

Example

You can try to run the following code to return how many seconds or milliseconds a transition effect takes to complete −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #div1 {
            position: relative;
            margin: 10px;
            height: 300px;
            width: 400px;
            padding: 20px;
            border: 2px solid blue;
         }

         #div2 {
            padding: 80px;
            position: absolute;
            border: 2px solid BLUE;
            background-color: yellow;
            transform: rotateY(45deg);
            transition: all 5s;
         }

         #div2:hover {
            background-color: orange;
            width: 50px;
            height: 50px;
            padding: 100px;
            border-radius: 50px;
         }
      </style>
   </head>
   <body>
      <p>Hover over DIV2</p>

      <button onclick = "display()">Set</button>

      <div id = "div1">DIV1
         <div id = "div2">DIV2</div>
      </div>

      <script>
         function display() {
            document.getElementById("myDIV").style.transitionDuration = "5s";
         }
      </script>
   </body>
</html>
Updated on: 2020-06-23T11:40:15+05:30

167 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements