animation-fill-mode ဂုဏ်သတ္တိ

animation-fill-mode ဂုဏ်သတ္တိသည် animation ကိုအဆုံးသတ်ပြီးနောက် မည်သည့်အနေအထားတွင်ရပ်တန့်ရမည်ကိုသတ်မှတ်ပေးသည်။ ပုံသေအားဖြင့် animation သည် မူလတန်ဖိုးသို့ပြန်သွားပြီး ထိုသို့ဖြစ်ခြင်းသည် အလွန်လှပသည်ဟုမထင်ရနိုင်ပါ။

Syntax

selector {
	animation-fill-mode: backwards | forwards | both | none;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`none`	အကယ်၍ animation delay သတ်မှတ်ထားပါက - delay အချိန်အတွင်း element သည်နေရာတွင်ပင် ကျန်ရှိနေမည်၊ ထို့နောက် `0%` frame သို့ ခုန်ကူးသွားမည်။ animation အဆုံးသတ်ပြီးနောက် element သည် ရပ်တန့်ခဲ့သည့်အခြေအနေတွင် မကျန်ရှိတော့ဘဲ ကနဦးအခြေအနေသို့ ခုန်ကူးသွားမည်။
`backwards`	စာမျက်နှာတင်ပြီးနောက် element အား `0%` frame သို့ရွေ့ရန်အတင်းအကျပ်ခိုင်းစေသည်၊ `animation-delay` သတ်မှတ်ထားသည့်တိုင် ဖြစ်ပြီး animation မစတင်မချင်း ထိုနေရာတွင်ပင် ကျန်ရှိနေစေသည်။ animation အဆုံးသတ်ပြီးနောက် element သည် ရပ်တန့်ခဲ့သည့်အခြေအနေတွင် မကျန်ရှိတော့ဘဲ ကနဦးအခြေအနေသို့ ခုန်ကူးသွားမည်။
`forwards`	animation အဆုံးသတ်ပြီးနောက် element သည် ရပ်တန့်ခဲ့သည့်အနေအထားတွင်ပင် ကျန်ရှိနေမည်ဟု browser အားညွှန်ကြားသည်။
`both`	backwards နှင့် forwards ကိုပေါင်းစပ်ထားသည် - စာမျက်နှာတင်ပြီးနောက် element သည် `0%` frame တွင်တည်ရှိမည်၊ ထို့နောက် animation အဆုံးသတ်ပြီးနောက် element သည် ရပ်တန့်ခဲ့သည့်နေရာတွင်ပင် ကျန်ရှိနေမည်။

ပုံသေတန်ဖိုး: none.

ဥပမာ . none တန်ဖိုး

ဤဥပမာတွင် margin-left ကို element အတွက် 300px အဖြစ်သတ်မှတ်ထားပြီး၊ animation ၏ ပထမဆုံး frame အတွက် - 0px အဖြစ်သတ်မှတ်ထားသည်။ animation-delay delay မရှိသောကြောင့်၊ element သည် စာမျက်နှာတင်ပြီးနောက် 300px တွင်မဟုတ်ဘဲ 0px တွင်ရှိမည်။ ထို့အပြင် animation အဆုံးသတ်ပြီးနောက် ကနဦးတန်ဖိုးသို့ ခုန်ကူးသွားမည်။

<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 ကို element အတွက် 300px အဖြစ်သတ်မှတ်ထားပြီး၊ animation ၏ ပထမဆုံး frame အတွက် - 0px အဖြစ်သတ်မှတ်ထားသည်။ ထို့အပြင် element အတွက် animation-delay delay ကို 3 စက္ကန့်အဖြစ်သတ်မှတ်ထားသည်၊ ထို့ကြောင့် element သည် စာမျက်နှာတင်ပြီးနောက် 0px တွင်မဟုတ်ဘဲ 300px တွင်ရှိမည်၊ ထို့နောက် animation စတင်ပြီး 3 စက္ကန့်ကြာပြီးနောက် ထိုနေရာတွင်ရပ်နေပြီး ၎င်းနောက် ခုန်ကူးကာ 0px သို့ရောက်ရှိမည် - ထိုနေရာမှ animation စတင်မည်။ ထို့အပြင် animation အဆုံးသတ်ပြီးနောက် ကနဦးတန်ဖိုးသို့ ခုန်ကူးသွားမည်။

<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: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ဥပမာ . backwards တန်ဖိုး

ဤဥပမာတွင် margin-left ကို element အတွက် 300px အဖြစ်သတ်မှတ်ထားပြီး၊ animation ၏ ပထမဆုံး frame အတွက် - 0px အဖြစ်သတ်မှတ်ထားသည်။ ထို့အပြင် element အတွက် animation-fill-mode ကို backwards တန်ဖိုးအဖြစ်သတ်မှတ်ထားသည်၊ ထို့ကြောင့် element စာမျက်နှာတင်ပြီးနောက် animation-fill-mode ကို none တန်ဖိုးအတွက်ဖြစ်ခဲ့သည့်အတိုင်း 300px တွင်မဟုတ်ဘဲ 0px တွင်ရှိမည်။ ထို့အပြင် animation အဆုံးသတ်ပြီးနောက် ကနဦးတန်ဖိုးသို့ ခုန်ကူးသွားမည်။

<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 ကို element အတွက် 300px အဖြစ်သတ်မှတ်ထားပြီး၊ animation ၏ ပထမဆုံး frame အတွက် - 0px အဖြစ်သတ်မှတ်ထားသည်။ ထို့အပြင် element အတွက် animation-delay delay ကို 3 စက္ကန့်အဖြစ်သတ်မှတ်ထားသည်၊ ထို့ကြောင့် element သည် စာမျက်နှာတင်ပြီးနောက် 0px တွင်မဟုတ်ဘဲ 300px တွင်ရှိမည်၊ ထို့နောက် animation စတင်ပြီး 3 စက္ကန့်ကြာပြီးနောက် ထိုနေရာတွင်ရပ်နေပြီး ၎င်းနောက် ခုန်ကူးကာ 0px သို့ရောက်ရှိမည် - ထိုနေရာမှ animation စတင်မည်။ animation-fill-mode ကို none တန်ဖိုးအဖြစ်သတ်မှတ်ထားသောကြောင့် animation ဖွင့်ပြီးနောက် element သည် ကနဦးတန်ဖိုးသို့ပြန်သွားမည်။

<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 တန်ဖိုးအဖြစ်သတ်မှတ်ထားပြီး၊ animation repetition count - ကို 1 အဖြစ်သတ်မှတ်ထားသည်။ animation ဖွင့်ပြီးနောက် element သည် animation အဆုံးသတ်ခဲ့သည့်နေရာတွင်ပင် ကျန်ရှိနေမည်၊ မူလအစမှတ်သို့ ခုန်ကူးသွားမည်မဟုတ်ပါ။

ထို့အပြင် margin-left ကို element အတွက် 300px အဖြစ်သတ်မှတ်ထားပြီး၊ ပထမဆုံး animation frame အတွက် - 0px အဖြစ်သတ်မှတ်ထားသည်။ ထို့အပြင် element အတွက် animation-delay delay ကို 3 စက္ကန့်အဖြစ်သတ်မှတ်ထားသည်၊ ထို့ကြောင့် element သည် စာမျက်နှာတင်ပြီးနောက် 0px တွင်မဟုတ်ဘဲ 300px တွင်ရှိမည်၊ ထို့နောက် animation စတင်ပြီး 3 စက္ကန့်ကြာပြီးနောက် ထိုနေရာတွင်ရပ်နေပြီး ၎င်းနောက် ခုန်ကူးကာ 0px သို့ရောက်ရှိမည် - ထိုနေရာမှ animation စတင်မည်။

<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 တန်ဖိုးအဖြစ်သတ်မှတ်ထားပြီး၊ animation repetition count - ကို 1 အဖြစ်သတ်မှတ်ထားသည်။ စာမျက်နှာတင်ပြီးနောက် element သည် animation ၏ ပထမဆုံး frame တွင်ရပ်နေမည် (0px တွင်ဖြစ်ပြီး၊ 300px တွင်မဟုတ်ပါ)၊ ထို့နောက် animation ဖွင့်ပြီးနောက် element သည် animation အဆုံးသတ်ခဲ့သည့်နေရာတွင်ပင် ကျန်ရှိနေမည်၊ မူလအစမှတ်သို့ ခုန်ကူးသွားမည်မဟုတ်ပါ။

<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 ၏အမည်ကိုသတ်မှတ်ပေးသည်
animation-duration ဂုဏ်သတ္တိ,
သည် animation ၏ကြာချိန်ကိုသတ်မှတ်ပေးသည်
animation-delay ဂုဏ်သတ္တိ,
သည် animation မစတင်မီ delay ကိုသတ်မှတ်ပေးသည်
animation-timing-function ဂုဏ်သတ္တိ,
သည် animation ၏အရှိန်နှုန်းကိုသတ်မှတ်ပေးသည်
animation-iteration-count ဂုဏ်သတ္တိ,
သည် animation ၏အကြိမ်ရေကိုသတ်မှတ်ပေးသည်
animation-direction ဂုဏ်သတ္တိ,
သည် animation ၏ဦးတည်ချက်ကိုသတ်မှတ်ပေးသည်
animation-play-state ဂုဏ်သတ္တိ,
သည် animation ကိုခေတ္တရပ်ဆိုင်းထားရန်ခွင့်ပြုသည်
animation ဂုဏ်သတ္တိ,
သည် animation များအတွက်အတိုကောက်ဖော်ပြချက်ဖြစ်သည်
@keyframes command,
သည် animation ၏အဓိကကြောရုပ်ကိုသတ်မှတ်ပေးသည်
ချောမွေ့သောအကူးအပြောင်းများ transition, သည် element ပေါ်သို့ mouse hover လုပ်သောအခါဖြစ်ပေါ်သော animation ဖြစ်သည်