transition ဂုဏ်သတ္တိ

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

ဖွဲ့စည်းပုံ

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

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

တန်ဖိုးများ

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

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

ဥပမာ

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

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

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

Результат:

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