CSS အခြေခံ အဆင့်ချိန် အချိန်

ဖော်ပြ နှင့် အသုံးပြုခြင်း

transition-timing-function အကျိုးသမား အသုံးပြုခြင်း သဘော ကို ကျမ်းသတ်ပြီးပြီး နေသည်။

အကျိုးသမား သဘော နှင့် အသုံးပြုခြင်း ကို လိုက်နာရမည်။

အခြားအစီအစဉ်

CSS အော်လာCSS ဆန်းသစ်

HTML DOM အမိန့်မိုးtransitionTimingFunction အကျိုးသမား

အမှတ်ပြ

ဘား 1

စတင် နှင့် အပိုးကြိမ့်မှု အတူတူကြိမ့်မှု မျဉ်းတွဲသည်:

div
{
transition-timing-function: linear;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

CSS လိုင်းရာ

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

အကျိုးသမား အနှုန်း

နှုန်း ဖော်ပြ
linear စတင် နှင့် အပိုးကြိမ့်မှု အခွင့်အရေးသို့ အတူတူကြိမ့်မှု မျဉ်းတွဲသည်၊ cubic-bezier(0,0,1,1) နှင့် တူညီသည်。
ease စတင်ကြိမ့်မှု မျဉ်းတွဲသည်၊ နောက်မှ အပိုးကြိမ့်မှု မျဉ်းတွဲသည်၊ နောက်မှ စတင်ကြိမ့်မှု အပိုးကြိမ့်မှု မျဉ်းတွဲသည်၊ cubic-bezier(0.25,0.1,0.25,1) နှင့် တူညီသည်。
ease-in စတင်ကြိမ့်မှု အပိုးကြိမ့်မှု မျဉ်းတွဲသည်၊ cubic-bezier(0.42,0,1,1) နှင့် တူညီသည်。
ease-out အပိုးကြိမ့်မှု အပိုးကြိမ့်မှု မျဉ်းတွဲသည်၊ cubic-bezier(0,0,0.58,1) နှင့် တူညီသည်。
ease-in-out စတင် နှင့် အပိုးကြိမ့်မှု မျဉ်းတွဲသည်၊ ပုံစံ cubic-bezier(0.42,0,0.58,1) နှင့် တူညီသည်。
cubic-bezier(n,n,n,n) cubic-bezier အမှတ် က ကို ကျမ်းသတ်ပြီးပြီး နေသည်။ အနှစ် 0 မှ 1 အထိ နှုန်းအရေအတွက် အခွင့်အရေးရှိသည်。

အဆိုပါအချက်အလက် တွင် အကြောင်းကြားချက် ကို ကြည့်ပါအချက်အလက် အများအပြား ကို အမှတ် အများအပြား ကြိုးစားကြည့်ပါ ဟု အချက်ပြသည့် အချက်အလက် တစ်ခုခု ကို အစီအစဉ်ပြုလုပ်ပါ

နည်းပါးစွာ

မူကြမ်း အဆင့် ease
အစိုးရပုံ no
ပုံစံ CSS3
JavaScript လိုင်းဘာသာ object.style.transitionTimingFunction="linear"

အခြား အမှတ် အများ

အမှတ် 2

အမျိုးအစားများ ကို သိရှိရန် ပို၍ ကြိုးစားပါ ဟု အချက်ပြသည့် အချက်အလက် တစ်ခုခု နှင့် အချက်အလက် တစ်ခုခု ကို အစီအစဉ်ပြုလုပ်ပါ

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 3

အထက်တွင် အတူတူပင် သော်လည်း ကိုယ်တိုင် cubic-bezier ဖြင့် အမျိုးအစားကို ကျွမ်းကျွမ်းစွာ ကျမ်းကျိန်းပေးသည်:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ဘရပ်ဆိုက် ထောက်ပံ့

ဘတ်မြစ်တွင် အချက်အလက်များ သည် အရေးပါသော အချက်အလက် ကို ပထမဆုံး ထောက်ပံ့ပေးသော ဘရပ်ဆိုက် အဆင့် ကို ချိတ်သက်သည်。

နှင့် -webkit-、-moz- သို့မဟုတ် -o- ဖြင့် အကြမ်းချုပ်အားဖြင့် အသုံးပြုသော ပထမဆုံး အဆင့် အစားအစား ကို ကြောင်းရှိသည်。

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-