How to set when the transition effect will start with JavaScript?

Javascript Object Oriented Programming Front End Technology

To set when the transition effect will start, use the JavaScript transitionDelay property. You can try to run the following code to learn how to return when the transition effect will start with JavaScript −

Example

<!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("div2").style.transitionTimingFunction = "ease-in";
            document.getElementById("div2").style.transitionDelay = "1s";
         }
      </script>
   </body>
</html>

Priya Pallavi

Updated on 02-Mar-2020 06:58:32

Previous Page Print Page Next Page