HTML DOM Style animationDelay प्रॉपर्टी

animationDelay प्रॉपर्टी का उपयोग एनिमेशन अनुक्रम के प्रारंभ समय को निर्दिष्ट करने के लिए किया जाता है। हम इसे तुरंत शुरू करने के लिए, समय अंतराल के बाद या बीच में शुरू करने के लिए सेट कर सकते हैं।

सिंटैक्स

animationDelay प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:

object.style.animationDelay = "time|initial|inherit"

मान

निम्नलिखित मान हो सकते हैं:

उदाहरण

animationDelay प्रॉपर्टी का उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> <style>    #box {       width: 50px;       height: 50px;       border-radius: 10%;       background: lightgreen;       position: relative;       animation: glide 5s;       animation-delay: 1s;       transition: 0.5s;    }    @keyframes glide {       from {left: 0px;}       to {left: 200px; background-color: lightblue;}    } </style> <script>    function delayChange(){       document.getElementById("box").style.animationDelay="5s";       document.getElementById("Sample").innerHTML="The animation will now start after a delay of 5 seconds";    } </script> </head> <body> <h1>animationDelay property example</h1> <div id="box"></div> <p>Change the above animation delay to 5s by clicking the below button</p> <button onclick="delayChange()">CHANGE DELAY</button> <p id="Sample"></p> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

1 सेकंड के बाद एनिमेशन शुरू होता है, और हमें इसके संक्रमण के दौरान निम्नलिखित आउटपुट मिलता है:

CHANGE DELAY बटन पर क्लिक करने पर, एनिमेशन अब 5 सेकंड के बाद शुरू होगा: