एनिमेशन-फिल-मोड गुण

animation-fill-mode गुण यह सेट करता है कि एनिमेशन समाप्त होने के बाद किस स्थिति में रुकेंगे। डिफ़ॉल्ट रूप से एनिमेशन अपने मूल मान पर वापस आ जाता है और यह बहुत अच्छा नहीं दिख सकता है।

सिंटैक्स

सिलेक्टर {
	animation-fill-mode: backwards | forwards | both | none;
}

मान

मान	विवरण
`none`	यदि एनिमेशन में देरी है - तो देरी के समय के दौरान तत्व अपने स्थान पर रहेगा, और फिर `0%` फ्रेम पर कूद जाएगा। एनिमेशन समाप्त होने के बाद तत्व उस स्थिति में नहीं रुकेगा, जहाँ वह रुका था, बल्कि प्रारंभिक स्थिति में वापस कूद जाएगा।
`backwards`	पृष्ठ लोड होने के बाद तत्व को `0%` फ्रेम पर ले जाता है, भले ही `animation-delay` सेट हो, और वहाँ तब तक रहता है जब तक एनिमेशन शुरू नहीं होता। एनिमेशन समाप्त होने के बाद तत्व उस स्थिति में नहीं रुकेगा जहाँ वह रुका था, बल्कि प्रारंभिक स्थिति में कूद जाएगा।
`forwards`	ब्राउज़र को निर्देशित करता है कि एनिमेशन समाप्त होने के बाद तत्व उसी स्थिति में रहेगा जहाँ वह रुका था।
`both`	backwards और forwards दोनों को शामिल करता है - पृष्ठ लोड होने के बाद तत्व `0%` फ्रेम पर सेट हो जाएगा, और एनिमेशन समाप्त होने के बाद तत्व वहीं रुकेगा जहाँ वह रुका था।

डिफ़ॉल्ट मान: none.

उदाहरण . none मान

इस उदाहरण में तत्व के लिए margin-left 300px पर सेट है, और एनिमेशन के पहले फ्रेम के लिए - 0px पर। चूंकि animation-delay नहीं है, इसलिए पृष्ठ लोड होने के बाद तत्व 0px पर होगा, न कि 300px पर। इसके अलावा, एनिमेशन समाप्त होने के बाद प्रारंभिक मान पर वापस कूद जाएगा:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

उदाहरण . none मान

इस उदाहरण में तत्व के लिए margin-left 300px पर सेट है, और एनिमेशन के पहले फ्रेम के लिए - 0px पर। साथ ही तत्व के लिए animation-delay 3 सेकंड पर सेट है, इसलिए पृष्ठ लोड होने के बाद तत्व 300px पर होगा, न कि 0px पर, और एनिमेशन शुरू होने के 3 सेकंड तक वहाँ खड़ा रहेगा और फिर 0px पर कूद जाएगा - और एनिमेशन वहाँ से शुरू होगा। इसके अलावा, एनिमेशन समाप्त होने के बाद प्रारंभिक मान पर वापस कूद जाएगा:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

उदाहरण . backwards मान

इस उदाहरण में तत्व के लिए margin-left 300px पर सेट है, और एनिमेशन के पहले फ्रेम के लिए - 0px पर। साथ ही तत्व के लिए animation-fill-mode backwards मान में सेट है, इसलिए तत्व पृष्ठ लोड होने के बाद 0px पर होगा, न कि 300px पर, जैसा कि animation-fill-mode के none मान के लिए होता था। इसके अलावा, एनिमेशन समाप्त होने के बाद प्रारंभिक मान पर वापस कूद जाएगा:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

उदाहरण . none मान और पुनरावृत्ति संख्या 1 के बराबर

इस उदाहरण में तत्व के लिए margin-left 300px पर सेट है, और एनिमेशन के पहले फ्रेम के लिए - 0px पर। साथ ही तत्व के लिए animation-delay 3 सेकंड पर सेट है, इसलिए पृष्ठ लोड होने के बाद तत्व 300px पर होगा, न कि 0px पर, और एनिमेशन शुरू होने के 3 सेकंड तक वहाँ खड़ा रहेगा और फिर 0px पर कूद जाएगा - और एनिमेशन वहाँ से शुरू होगा। चूंकि animation-fill-mode none मान में सेट है, इसलिए एनिमेशन चलने के बाद तत्व प्रारंभिक मान पर वापस आ जाएगा:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

उदाहरण . forwards मान और पुनरावृत्ति संख्या 1 के बराबर

इस उदाहरण में animation-fill-mode forwards मान में सेट है, और एनिमेशन पुनरावृत्ति की संख्या - 1 पर। एनिमेशन चलने के बाद तत्व उसी स्थिति में रहेगा जहाँ एनिमेशन समाप्त हुआ था, न कि प्रारंभिक बिंदु पर कूद जाएगा।

इसके अलावा, तत्व के लिए margin-left 300px पर सेट है, और एनिमेशन के पहले फ्रेम के लिए - 0px पर। साथ ही तत्व के लिए animation-delay 3 सेकंड पर सेट है, इसलिए तत्व पृष्ठ लोड होने के बाद 300px पर होगा, न कि 0px पर, और एनिमेशन शुरू होने के 3 सेकंड तक वहाँ खड़ा रहेगा, और फिर 0px पर कूद जाएगा - और एनिमेशन वहाँ से शुरू होगा:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

उदाहरण . both मान और पुनरावृत्ति संख्या 1 के बराबर

इस उदाहरण में animation-fill-mode both मान में सेट है, और एनिमेशन पुनरावृत्ति की संख्या - 1 पर। पृष्ठ लोड होने के बाद तत्व एनिमेशन के पहले फ्रेम पर होगा (0px पर, न कि 300px पर), और एनिमेशन चलने के बाद तत्व उसी स्थिति में रहेगा जहाँ एनिमेशन समाप्त हुआ था, न कि प्रारंभिक बिंदु पर कूद जाएगा:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

यह भी देखें

animation-name गुण,
जो एनिमेशन का नाम निर्धारित करता है
animation-duration गुण,
जो एनिमेशन की अवधि निर्धारित करता है
animation-delay गुण,
जो एनिमेशन निष्पादित करने से पहले देरी निर्धारित करता है
animation-timing-function गुण,
जो एनिमेशन निष्पादन की गति निर्धारित करता है
animation-iteration-count गुण,
जो एनिमेशन पुनरावृत्तियों की संख्या निर्धारित करता है
animation-direction गुण,
जो एनिमेशन की दिशा निर्धारित करता है
animation-play-state गुण,
जो एनिमेशन को रोकने की अनुमति देता है
animation गुण,
जो एनिमेशन के लिए एक संक्षिप्त रूप है
@keyframes कमांड,
जो एनिमेशन की कीफ्रेम निर्धारित करती है
transition स्मूद ट्रांज़िशन, जो तत्व पर हॉवर करने पर एनिमेशन का प्रतिनिधित्व करते हैं