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

animationDuration प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एनिमेशन को एक चक्र पूरा करने में कितना समय लगेगा।

सिंटैक्स

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

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

मान

निम्नलिखित मान संभव हैं:

उदाहरण

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

<!DOCTYPE html> <html> <head> <style>    div {       width: 25px;       height: 25px;       border-radius: 50%;       border: 8px solid orange;       position: relative;       animation: ring infinite;       animation-duration: 5s;    }    @keyframes ring {       from {top: 0px; left:0px}       to {border-color: purple; left: 500px;}    } </style> <script>    function changeDuration(){       document.getElementById("DIV1").style.animationDuration="10s";       document.getElementById("Sample").innerHTML="The animation duration has been increased from 5s to 10s"; } </script> </head> <body> <div id="DIV1"></div> <p>Click the below button to create the above animation duration</p> <button onclick="changeDuration()">CHANGE DURATION</button> <p id="Sample"></p> </body> </html>

आउटपुट

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

कुछ समय बाद एनिमेशन रंग बदलता है:

CHANGE DURATION बटन पर क्लिक करने पर एनिमेशन की अवधि 10 सेकंड तक बढ़ जाएगी: