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

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

သဒ္ဒါဖွဲ့စည်းပုံ

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

တန်ဖိုးများ

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

စံထားရှိသော တန်ဖိုး - 0s။

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့်ထောက်၍ နေရာယူပါ - 3 စက္ကန့် ဘာမှဖြစ်မည်မဟုတ် (3s နှောင့်နှေးချိန် ရှိနေသည်)၊ ထို့နောက် ၎င်းသည် မိမိ၏အကျယ်ကို 2 စက္ကန့်အတွင်း ချောမွေ့စွာ ပြောင်းလဲမည်။ ထို့နောက် မောက်စ်ကို ဖယ်ရှားလိုက်ပါက - ထပ်၍ 3 စက္ကန့် ဘာမှဖြစ်မည်မဟုတ်၊ ထို့နောက် အကျယ်သည် မူလတန်ဖိုးသို့ ပြန်လည် ချောမွေ့စွာ ကျဆင်းသွားမည် -

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

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

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့်ထောက်၍ နေရာယူပါ - ၎င်းသည် ပထမဦးစွာ မိမိ၏ အကျယ်ကို 2 စက္ကန့်အတွင်း ပြောင်းလဲမည်၊ ထို့နောက် မိမိ၏အမြင့်ကို 4 စက္ကန့်အတွင်း ပြောင်းလဲမည်။ ဂုဏ်သတ္တိများသည် အစဉ်လိုက် ပြောင်းလဲသွားမည်၊ အဘယ်ကြောင့်ဆိုသော် အမြင့်အတွက် ၎င်း၏ နှောင့်နှေးချိန်ကို 3 စက္ကန့်အဖြစ် သတ်မှတ်ထားသောကြောင့်ဖြစ်သည် (အကျယ် ပြောင်းလဲချိန်)။ မောက်စ်ကို ဖယ်ရှားလိုက်ပါက - ပြောင်းလဲမှုများသည် ပြောင်းပြန် အစဉ်အတိုင်း ဖြစ်ပေါ်လာမည် - ပထမဦးစွာ အကျယ် ကျဆင်းသွားမည်၊ ထို့နောက် အမြင့် ကျဆင်းသွားမည် -

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

#elem {
	border: 1px solid black;
	transition-duration: 2s, 4s;
	transition-property: width, height;
	transition-delay: 0s, 3s;
	width: 100px;
	height: 25px;
}
#elem:hover {
	width: 400px;
	height: 50px;
}

ဤသည်ကိုလည်း ကြည့်ရှုပါ

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