CSS cubic-bezier() လုပ်ဆောင်ချက်
ဥပမာ
အစမှအဆုံး ပြောင်းလဲနိုင်သော အမြန်နှုန်းဖြင့် အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှု
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
cubic-bezier() လုပ်ဆောင်ချက်သည် Cubic Bezier မျဉ်းကွေးကို သတ်မှတ်သည်။
Cubic Bezier မျဉ်းကွေးကို P0၊ P1၊ P2 နှင့် P3 အမှတ်လေးခုဖြင့် သတ်မှတ်သည်။ P0 နှင့် P3 သည် မျဉ်းကွေး၏ အစနှင့် အဆုံးဖြစ်ပြီး၊ CSS တွင် ဤအချက်များကို သြဒီနိတ်များသည် အချိုးများဖြစ်သောကြောင့် ပုံသေသတ်မှတ်ထားသည်။ P0 သည် (0, 0) ဖြစ်ပြီး ကနဦးအချိန်နှင့် ကနဦးအခြေအနေကို ကိုယ်စားပြုသည်၊ P3 သည် (1၊ 1) ဖြစ်ပြီး နောက်ဆုံးအချိန်နှင့် နောက်ဆုံးအခြေအနေကို ကိုယ်စားပြုသည်။
cubic-bezier() လုပ်ဆောင်ချက်ကို animation-timeing-function property နှင့် transition -timeing-function property တို့နှင့်အတူ အသုံးပြုနိုင်ပါသည် ။
ဗားရှင်း- | CSS3 |
---|
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် လုပ်ဆောင်ချက်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS Syntax
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |