एनीमेशनफिलमोड प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि निष्पादन समय के बाहर शैलियों को कैसे लागू किया जाता है, यानी समाप्त होने के बाद या यदि कोई देरी निर्दिष्ट की गई है। यह एनीमेशन शुरू होने से पहले और समाप्त होने के बाद सीएसएस एनीमेशन शैली को एक तत्व में सेट करने में सहायक है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैएनीमेशनफिलमोड गुण सेट करना -
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
मान
निम्नलिखित मान हैं -
| मान | विवरण |
|---|---|
| कोई नहीं | इससे यह पता चलता है कि एनीमेशन शुरू होने से पहले या एनीमेशन समाप्त होने के बाद लक्ष्य तत्व पर कोई भी शैली लागू नहीं होगी। यह डिफ़ॉल्ट मान है। |
| आगे की ओर | यह ऐनिमेशन समाप्त होने के बाद लक्ष्य तत्व पर अंतिम की-फ़्रेम शैली लागू करता है। |
| पीछे की ओर | यह एनिमेशन समाप्त होने के बाद लक्ष्य तत्व पर पहली की-फ़्रेम शैली लागू करता है। |
| दोनों | यह आगे और पीछे दोनों नियमों को एनिमेशन पर लागू करता है |
| आरंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए |
| उत्तराधिकारी | इस संपत्ति को इसके मूल तत्व से विरासत में मिला है। |
उदाहरण
आइए एनीमेशनफिलमोड प्रॉपर्टी के लिए उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
जब एनिमेशन समाप्त होता है तो वर्गाकार रंग गहरा लाल होता है क्योंकि यह अंतिम कीफ़्रेम होता है -
चेंज फिल पर क्लिक करने पर रंग नारंगी में बदल जाता है जो कि हमारा पहला कीफ्रेम है -
नोट - यह गुण IE/EDGE और Safari ब्राउज़र में समर्थित नहीं है।