transition ဂုဏ်သတ္တိ

transition ဂုဏ်သတ္တိသည် ချောမွေ့သော အပြောင်းအလဲများအတွက် အတိုကောက်တစ်ခုဖြစ်ပြီး transition-duration, transition-property, transition-timing-function နှင့် transition-delay တို့ကို တစ်ပြိုင်နက်တည်း သတ်မှတ်နိုင်စေပါသည်။

ဖွဲ့စည်းပုံ

selector {
	transition: တန်ဖိုး;
}

ဂုဏ်သတ္တိများ၏ အစီအစဥ်သည် အရေးမကြီးပါ၊ သို့သော် အချိန်ကာလ (transition-duration) သည် နှောင့်နှေးချက် (transition-delay) ၏ ရှေ့တွင်ရှိရမည်။

တန်ဖိုးများ

သက်ဆိုင်ရာ ဂုဏ်သတ္တိများကို ကြည့်ပါ။ ပုံသေ တန်ဖိုး - all 0s ease 0s။

none တန်ဖိုးသည် အပြောင်းအလဲအားလုံးကို ပယ်ဖျက်သည် (၎င်းတို့သည် ချက်ချင်းဖြစ်ပေါ်လာမည်)။

ဥပမာ

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

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

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

ဤအကြောင်းကိုလည်း ကြည့်ပါ

animation ဂုဏ်သတ္တိ,
၎င်းကို အသုံးပြု၍ animation ပြုလုပ်နိုင်သည်