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

animationFillMode प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एनिमेशन के निष्पादन समय के बाहर स्टाइल कैसे लागू किए जाएं - यानी एनिमेशन समाप्त होने के बाद या यदि कोई देरी निर्दिष्ट की गई हो। यह किसी तत्व पर CSS एनिमेशन स्टाइल को एनिमेशन शुरू होने से पहले और समाप्त होने के बाद सेट करने में मददगार होता है।

सिंटैक्स

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

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

मान

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

उदाहरण

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

<!DOCTYPE html> <html> <head> <style>    div {       height: 30px;       width: 30px;       background-color: orange;       animation: small 4s;       animation-fill-mode: forwards;    }    @keyframes small {       0% {          width: 200px;          height: 200px;          background-color: white;       }       33% {          background-color: green;       }       66% {          background-color: violet;       }       100% {          background-color: darkred;       }    } </style> <script>    function changeFillMode(){       document.getElementById("DIV1").style.animationFillMode="backwards";       document.getElementById("Sample").innerHTML="The animation fillmode is now backwards";    } </script> </head> <body> <div id="DIV1"></div> <p>Click the below button to change the above animation fillmode property</p> <button onclick="changeFillMode()">CHANGE FILL</button> <p id="Sample"></p> </body> </html>

आउटपुट

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

जब एनिमेशन समाप्त होता है तो वर्ग का रंग गहरा लाल होता है क्योंकि यह अंतिम कीफ्रेम है:

CHANGE FILL बटन पर क्लिक करने पर रंग नारंगी हो जाता है जो हमारा पहला कीफ्रेम है:

नोट - यह प्रॉपर्टी IE/EDGE और Safari ब्राउज़र में समर्थित नहीं है।