animation-direction ဂုဏ်သတ္တိ

animation-direction ဂုဏ်သတ္တိသည် animation ၏ ဦးတည်ချက်ကို သတ်မှတ်ပေးသည်။ ပုံသေအားဖြင့် animation တစ်ခုသည် 1 ကြိမ်သာ ပြန်လည်ဖြစ်ပွားပြီးနောက် မူလအနေအထားသို့ ပြန်သွားသည်၊ ထို့နောက် animation-delay ကဲ့သို့ အချိန်အနည်းငယ် စောင့်ဆိုင်းခြင်း သတ်မှတ်ထားပါက၊ သတ်မှတ်ထားသော အချိန်ကို စောင့်ပြီးမှသာ သံသရာ စတင်မည်ဖြစ်သည်။

ဤဂုဏ်သတ္တိသည် ဤအပြုအမူကို ပြောင်းလဲရန် ခွင့်ပြုပေးသည်၊ ဥပမာအားဖြင့် animation ပြီးဆုံးသွားသောအခါ ၎င်းပြီးဆုံးသွားသည့်နေရာတွင် ဆက်ရှိနေစေရန်၊ မူလအနေအထားသို့ ခုန်ကျော်သွားခြင်း မဖြစ်စေရန် ဖြစ်သည်။

ထို့အပြင် ဤကဲ့သို့ အပြုအမူကိုလည်း သတ်မှတ်နိုင်သည်- animation သည် အဆုံးစွန်သို့ ရောက်သွားပြီး နဂိုအတိုင်း ပြန်လာမည် (transition တွင်ကဲ့သို့)။ အောက်ပါ ဖော်ပြချက်ကို ကြည့်ပါ။

ဝါကျဖွဲ့ပုံ

selector {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`reverse`	Animation ကို ပြောင်းပြန်ဦးတည်ချက်ဖြင့် ဖွင့်ပြမည်။
`alternate`	Animation ကို အရင်ဆုံး ပုံမှန်ဦးတည်ချက်ဖြင့်၊ ထို့နောက် ပြောင်းပြန်ဦးတည်ချက်ဖြင့် ဖွင့်ပြမည် (transition ကဲ့သို့)။
`alternate-reverse`	Animation ကို နောက်ဆုံးအနေအထားမှ စတင်ပြီး ပြောင်းပြန်ဦးတည်ချက်ဖြင့် ဖွင့်ပြမည်။ အခြေခံအားဖြင့် ဤတန်ဖိုးသည် `alternate` နှင့် `reverse` တို့ကို ပေါင်းစပ်ထားခြင်း ဖြစ်သည်။
`normal`	Animation ကို အစမှ အဆုံးသို့ ဖွင့်ပြပြီး ပြီးဆုံးသွားသောအခါ ခုန်ကူးကာ မူလအနေအထားသို့ ပြန်သွားမည်။

ပုံသေတန်ဖိုး - normal။

ဥပမာ

ယခု element သည် တစ်ဖက်သို့ ရွေ့လျားသွားပြီး၊ ထို့နောက် နဂိုအတိုင်း ပြန်လာမည်၊ အဘယ့်ကြောင့်ဆိုသော် alternate တန်ဖိုးကို သတ်မှတ်ထားသောကြောင့် ဖြစ်သည်။ ဤသို့ဖြစ်ရာတွင် animation-duration သည် 3 စက္ကန့် တန်ဖိုးရှိသည်၊ ဆိုလိုသည်မှာ "ဟိုဘက်သို့" နှင့် "ပြန်လာ" ရွေ့လျားမှုများသည် 3 စက္ကန့် ကြာမြင့်မည် ဖြစ်သည်-

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

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

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ဥပမာ

ယခု element သည် ပြောင်းပြန်ဦးတည်ချက်ဖြင့် ရွေ့လျားမည် (ဘယ်မှ ညာသို့ ရွေ့ရမည့်အစား၊ ညာမှ ဘယ်သို့ ရွေ့လျားမည်)-

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ဥပမာ

ယခု element သည် ဟိုဘက်သို့ ပြန်လာရွေ့လျားမည်၊ သို့သော် ပြောင်းပြန်ဦးတည်ချက်ဖြင့် ဖြစ်သည် (ဘယ်ဘက်မှ စတင်ရမည့်အစား၊ ညာဘက်မှ စတင်မည်)-

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

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

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ထပ်မံကြည့်ရှုရန်

animation-name ဂုဏ်သတ္တိ၊
အရာ၌ animation ၏ အမည်ကို သတ်မှတ်ပေးသည်
animation-duration ဂုဏ်သတ္တိ၊
အရာ၌ animation ၏ ကြာချိန်ကို သတ်မှတ်ပေးသည်
animation-delay ဂုဏ်သတ္တိ၊
အရာ၌ animation စတင်ရန် မတိုင်မီ ကြာမြင့်ချိန်ကို သတ်မှတ်ပေးသည်
animation-timing-function ဂုဏ်သတ္တိ၊
အရာ၌ animation ဖွင့်ပြမှု၏ အမြန်နှုန်းကို သတ်မှတ်ပေးသည်
animation-iteration-count ဂုဏ်သတ္တိ၊
အရာ၌ animation ၏ အကြိမ်အရေအတွက်ကို သတ်မှတ်ပေးသည်
animation-fill-mode ဂုဏ်သတ္တိ၊
အရာ၌ animation ၏ အနေအထားကို သတ်မှတ်ပေးသည်
animation-play-state ဂုဏ်သတ္တိ၊
အရာ၌ animation ကို ခေတ္တရပ်တန့်ထားရန် ခွင့်ပြုပေးသည်
animation ဂုဏ်သတ္တိ၊
အရာ၌ animation များအတွက် အတိုကောက် ဖော်ပြချက်ဖြစ်သည်
@keyframes command၊
အရာ၌ animation ၏ အဓိက ကြားခံများကို သတ်မှတ်ပေးသည်
transition ချောမွေ့သော အကူးအပြောင်းများ၊ အရာ၌ element အပေါ် mouse တင်သောအခါ ဖြစ်ပေါ်သော animation ဖြစ်သည်