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

CSS हमें तत्वों के गुणों के संक्रमण को एनिमेट करने की अनुमति देता है। हम अपने वांछित स्टाइल को परिभाषित करने के लिए animation प्रॉपर्टी का उपयोग करते हैं। हम animation कीवर्ड का उपयोग करके animation-name, animation-duration, animation-iteration-count जैसे गुणों को संयोजित कर सकते हैं।

सिंटैक्स

animation प्रॉपर्टी का सिंटैक्स निम्नानुसार है:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

मान

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

उदाहरण

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

<!DOCTYPE html> <html> <head> <style>    div {       width: 5px;       height: 15px;       background-color: limegreen;       animation: demo 4s infinite;    }    @keyframes demo {       from {width: 5px; background-color: limegreen;}       to {width: 400px; background-color: darkgreen;}    }    @keyframes demo1 {       from {height: 5px; background-color: limegreen;}       to {height: 400px; background-color: darkgreen;}    } </style> <script>    function changeAnimation() {       document.getElementById("DIV1").style.animation = "demo1 4s 2";    } </script> </head> <body> <button onclick="changeAnimation()">CHANGE ANIMATION</button> <p>Change the below animation by clicking the above button</p> <div id="DIV1"></div> </body> </html>

आउटपुट

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

CHANGE ANIMATION बटन पर क्लिक करने पर, एनिमेशन बदल जाएगा: