How to set the speed curve of the transition effect with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the transitionTimingFunction property to set the speed of the transition. Set it to any of the following values − ease, ease-in, ease-out, linear, etc.

Example

You can try to run the following code to return the speed curve of the transition effect with JavaScript −

<!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";
         }
      </script>
   </body>
</html>

Anvi Jain

Updated on 23-Jun-2020 11:41:38

Previous Page Print Page Next Page