जावास्क्रिप्ट के साथ ट्रांजिशन इफेक्ट कब शुरू होगा, यह कैसे सेट करें?

ट्रांजिशन इफेक्ट कब शुरू होगा, यह सेट करने के लिए, जावास्क्रिप्ट transitionDelay प्रॉपर्टी का उपयोग करें। जावास्क्रिप्ट के साथ ट्रांजिशन इफेक्ट कब शुरू होगा, यह वापस करना सीखने के लिए निम्न कोड चलाकर देखें:

उदाहरण

<!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>DIV2 पर होवर करें</p>       <button onclick = "display()">सेट करें</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>