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

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

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

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

တန်ဖိုးများ

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

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

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

ဥပမာ

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

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

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

Результат:

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