transition-duration ဂုဏ်သတ္တိ

transition-duration ဂုဏ်သတ္တိသည် transition ချောမွေ့အကူးအပြောင်း လုပ်ဆောင်ရန်အချိန်ကို သတ်မှတ်ပေးသည်။

Syntax

selector {
	transition-duration: s သို့မဟုတ် ms ဖြင့်အချိန်;
}

တန်ဖိုးများ

တန်ဖိုး	ရှင်းလင်းချက်
`s`	စက္ကန့်ဖြင့်အချိန်ကိုသတ်မှတ်ပေးသည် (ဥပမာ `3s`)။ ဒသမတန်ဖိုးများကိုလည်းသတ်မှတ်နိုင်သည်၊ ဥပမာ၊ `0.5s` - တစ်စက္ကန့်၏တစ်ဝက်။
`ms`	မီလီစက္ကန့်ဖြင့်အချိန်ကိုသတ်မှတ်ပေးသည် (ဥပမာ `3ms`)။ တစ်စက္ကန့်သည် `1000` မီလီစက္ကန့်ဖြစ်သည်။

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

ဥပမာ

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

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

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

ဆက်လက်လေ့လာရန်

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