animation-timing-function ပိုင်ဆိုင်မှု

animation-timing-function ပိုင်ဆိုင်မှုသည် animation ၏ အပြောင်းအလဲ အမြန်နှုန်း (အရှိ်)ကို သတ်မှတ်ပေးသည်။ ဥပမာ၊ အစမှာ ဖြေးဖြေး၊ ပြီးမှ မြန်မြန်၊ နောက်ဆုံးမှာ ဖြေးဖြေးနဲ့ စသည်ဖြင့်။

ဝါကျဖွဲ့ပုံ

selector {
	animation-timing-function: value;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`ease`	အစမှာ ဖြေးဖြေး၊ ပြီးမှ မြန်မြန်၊ အဆုံးမှာ ထပ်မံ ဖြေးဖြေး။
`ease-in`	ဖြေးဖြေးချင်းစတင်ပြီး တဖြည်းဖြည်း အရှိန်မြှင့်သည်။
`ease-out`	မြန်မြန်ချင်းစတင်ပြီး တဖြည်းဖြည်း ရပ်တန့်သွားသည်။
`ease-in-out`	အစမှာ ဖြေးဖြေး၊ ပြီးမှ မြန်မြန်၊ အဆုံးမှာ ထပ်မံ ဖြေးဖြေး။ ease နှင့် အမြန်နှုန်းချင်း ကွာခြားသည်။
`linear`	အမြဲတမ်း တူညီသော အမြန်နှုန်း။
`step-start`	Animation မရှိ၊ ပိုင်ဆိုင်မှုသည် ချက်ချင်း နောက်ဆုံးတန်ဖိုးကို ယူသည်။
`step-end`	Animation မရှိ၊ ပိုင်ဆိုင်မှုသည် `animation-duration` တွင် သတ်မှတ်ထားသော အချိန်ကို စောင့်ပြီးမှ နောက်ဆုံးတန်ဖိုးကို ချက်ချင်း ယူသည်။
`steps`	ပိုင်ဆိုင်မှု၏ တန်ဖိုးသည် ခုန်တက်လိုက်ကျဆင်းလိုက်ဖြင့် ပြောင်းလဲသည်။
`cubic-bezier`	�ည်သည့် animation ကိုမဆို သတ်မှတ်နိုင်သော Bezier မျဉ်းကွေး။ ကြည့်ရန် Bezier မျဉ်းကွေး ဖန်တီးစက်။

စံထားရာ တန်ဖိုး: ease.

မတူညီသော တန်ဖိုးများကို နှိုင်းယှဉ်ခြင်း

အောက်တွင် တင်ပြထားသော ဘလော့ခ်များပေါ်သို့ မောက်စ်ကို ရွှေ့တင်ပါ၊ အချိန်ပိုင်း လုပ်ဆောင်ချက် အမျိုးအစားအားလုံး၏ လုပ်ဆောင်ပုံကို မြင်တွေ့နိုင်ရန်။

ဤသည်လည်း ကြည့်ပါ

animation ပိုင်ဆိုင်မှု၊
အထူးပြု animation များအတွက် အတိုကောက်ပိုင်ဆိုင်မှုတစ်ခု ဖြစ်သည်။
@keyframes command၊
animation ၏ အဓိက ဖရိမ်များကို သတ်မှတ်ပေးသည်။
�ျောမွေ့သော အကူးအပြောင်းများ transition၊ element ပေါ်သို့ မောက်စ်ရွှေ့တင်ခြင်းဖြင့် ဖြစ်ပေါ်သော animation ဖြစ်သည်။