ဂုဏ်သတ္တိ transition-timing-function

ဂုဏ်သတ္တိ transition-timing-function သည် ချောမွေ့သော အပြောင်းအလဲ transition ၏ အရှိန်ကို သတ်မှတ်ပေးသည်။ ဥပမာ၊ အစတွင် ဖြည်းဖြည်း၊ ထို့နောက် မြန်မြန်၊ ထို့နောက် ဖြည်းဖြည်း စသဖြင့် ဖြစ်သည်။

စာကြောင်းဖွဲ့ပုံ

ရွေးချယ်သူ {
	transition-timing-function: တန်ဖိုး;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`ease`	အစတွင် ဖြည်းဖြည်း၊ ထို့နောက် မြန်မြန်၊ အဆုံးတွင် ပြန်လည် ဖြည်းဖြည်း။
`ease-in`	ဖြည်းဖြည်းချင်းစတင်ပြီး ဖြည်းဖြည်းချင်း အရှိန်မြှင့်သည်။
`ease-out`	မြန်မြန်စတင်ပြီး ဖြည်းဖြည်းချင်း ရပ်တန့်သွားသည်။
`ease-in-out`	အစတွင် ဖြည်းဖြည်း၊ ထို့နောက် မြန်မြန်၊ အဆုံးတွင် ပြန်လည် ဖြည်းဖြည်း။ ease မှ အရှိန်ဖြင့် ကွာခြားသည်။
`linear`	အမြဲတမ်း တူညီသော အရှိန်။
`step-start`	အန်နီမေးရှင်းမရှိ၊ ဂုဏ်သတ္တိသည် ချက်ချင်း နောက်ဆုံးတန်ဖိုးကို ယူသည်။
`step-end`	အန်နီမေးရှင်းမရှိ၊ ဂုဏ်သတ္တိသည် အချိန်ကို စောင့်နေသည်၊ `transition-duraton` တွင် သတ်မှတ်ထားသော၊ ထို့နောက် ချက်ချင်း နောက်ဆုံးတန်ဖိုးကို ယူသည်။
`steps`	ဂုဏ်သတ္တိ၏ တန်ဖိုးသည် ခုန်တက်ပြောင်းလဲသည်။
`cubic-bezier`	ဘီဇီယာ မျဉ်းကွေး၊ ၎င်းသည် စိတ်ကြိုက် အန်နီမေးရှင်းကို သတ်မှတ်နိုင်သည်။ ကြည့်ပါ ဘီဇီယာမျဉ်းကွေး ထုတ်လုပ်စက်။

စံထားရှိသော တန်ဖိုး: ease။

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

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

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ကို ရွှေ့လိုက်ပါ - ၎င်းသည် ချောမွေ့စွာ မိမိ၏ အကျယ်ကို 2 စက္ကန့်အတွင်း ပြောင်းလဲလိမ့်မည်။ ease-in တန်ဖိုး သတ်မှတ်ထားသောကြောင့်၊ အန်နီမေးရှင်း ဖြည်းဖြည်းချင်းစတင်ပြီး ဖြည်းဖြည်းချင်း အရှိန်မြှင့်သွားမည်:

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

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

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

ဂုဏ်သတ္တိ transition-duration,
ချောမွေ့သော အပြောင်းအလဲ၏ ကြာချိန်ကို သတ်မှတ်ပေးသည်
ဂုဏ်သတ္တိ transition-property,
ချောမွေ့သော အပြောင်းအလဲအတွက် ဂုဏ်သတ္တိအမည်ကို သတ်မှတ်ပေးသည်
ဂုဏ်သတ္တိ transition-delay,
ချောမွေ့သော အပြောင်းအလဲမတိုင်မီ နောက်ကျချိန်ကို သတ်မှတ်ပေးသည်
ဂုဏ်သတ္တိ transition,
ချောမွေ့သော အပြောင်းအလဲအတွက် အတိုကောက် ဖြစ်သည်
ဂုဏ်သတ္တိ animation,
၎င်းကို အသုံးပြု၍ အန်နီမေးရှင်းပြုလုပ်နိုင်သည်