CSS အသွင်ကူးပြောင်းမှုများ

❮ ယခင် နောက်တစ်ခု ❯

CSS အသွင်ကူးပြောင်းမှုများ

CSS အသွင်ကူးပြောင်းမှုများသည် သတ်မှတ်ကာလတစ်ခုအတွင်း ပိုင်ဆိုင်မှုတန်ဖိုးများကို ချောမွေ့စွာ ပြောင်းလဲနိုင်စေပါသည်။

CSS အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကိုကြည့်ရန် အောက်ပါဒြပ်စင်ပေါ်တွင် မောက်စ်ကိုနှိပ်ပါ-

CSS

ဤအခန်းတွင် အောက်ပါဂုဏ်သတ္တိများအကြောင်း သင်လေ့လာပါမည်။

transition
transition-delay
transition-duration
transition-property
transition-timing-function

အကူးအပြောင်းများအတွက် ဘရောင်ဇာပံ့ပိုးမှု

ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။

Property
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

CSS Transitions ကို ဘယ်လိုသုံးမလဲ။

အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကို ဖန်တီးရန်၊ သင်သည် အရာနှစ်ခုကို သတ်မှတ်ရပါမည်-

သင်အကျိုးသက်ရောက်မှုကိုထည့်လိုသော CSS ပိုင်ဆိုင်မှု
အကျိုးသက်ရောက်မှု၏ကြာချိန်

မှတ်ချက်- ကြာချိန်အပိုင်းကို မသတ်မှတ်ထားပါက၊ မူရင်းတန်ဖိုးသည် 0 ဖြစ်သောကြောင့် အကူးအပြောင်းသည် အကျိုးသက်ရောက်မှု ရှိမည်မဟုတ်ပါ။

အောက်ပါဥပမာသည် 100px * 100px အနီရောင် <div> ဒြပ်စင်ကို ပြသသည်။ <div> ဒြပ်စင်သည် ကြာချိန် 2 စက္ကန့်ဖြင့် width ပိုင်ဆိုင်မှုအတွက် အကူးအပြောင်းအကျိုးသက်ရောက်မှုကိုလည်း ဖော်ပြထားပါသည်။

ဥပမာ

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

သတ်မှတ်ထားသော CSS ပိုင်ဆိုင်မှု (အကျယ်) တန်ဖိုးကို ပြောင်းလဲသည့်အခါ အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှု စတင်ပါမည်။

ယခု၊ အသုံးပြုသူတစ်ဦး <div> ဒြပ်စင်ကို မောက်စ်တင်သောအခါ width property အတွက် တန်ဖိုးအသစ်တစ်ခုကို သတ်မှတ်ကြပါစို့။

ဥပမာ

div:hover {
width: 300px;
}

ကာဆာသည် ဒြပ်စင်မှ မောက်စ်ကို ရွှေ့သည့်အခါ ၎င်း၏ မူရင်းစတိုင်သို့ တဖြည်းဖြည်း ပြောင်းလဲသွားကြောင်း သတိပြုပါ။

ပိုင်ဆိုင်မှုတန်ဖိုးများစွာကို ပြောင်းလဲပါ။

အောက်ဖော်ပြပါ ဥပမာသည် အနံနှင့် အမြင့် ပိုင်ဆိုင်မှုနှစ်ခုလုံးအတွက် အကူးအပြောင်းအကျိုးသက်ရောက်မှုကို အကျယ်အတွက် 2 စက္ကန့်ကြာ နှင့် အမြင့်အတွက် 4 စက္ကန့်ကြာ ပါဝင်သည်-

ဥပမာ

div {
transition: width 2s, height 4s;
}

Transition ၏ Speed Curve ကို သတ်မှတ်ပါ။

ပိုင်ဆိုင်မှုသည် အ transition-timing-functionကူးအပြောင်းအကျိုးသက်ရောက်မှု၏ အမြန်နှုန်းမျဉ်းကွေးကို သတ်မှတ်ပေးသည်။

အကူးအပြောင်း-အချိန်ကိုက်-လုပ်ဆောင်ချက် ပိုင်ဆိုင်မှုတွင် အောက်ပါတန်ဖိုးများ ရှိနိုင်သည်-

ease- အကူးအပြောင်းအကျိုးသက်ရောက်မှုကို နှေးကွေးစွာစတင်ပြီးနောက်၊ မြန်ပြီးနောက် ဖြည်းညှင်းစွာအဆုံးသတ်ပါ (၎င်းသည် မူရင်းဖြစ်သည်)
linear- အစမှအဆုံး တူညီသောအမြန်နှုန်းဖြင့် အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကို သတ်မှတ်သည်။
ease-in- နှေးနှေးစတင်ခြင်းဖြင့် အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကို သတ်မှတ်သည်။
ease-out - နှေးကွေးသောအဆုံးဖြင့် အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကို သတ်မှတ်သည်။
ease-in-out - နှေးကွေးသောအစနှင့်အဆုံးဖြင့် အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကို သတ်မှတ်သည်။
cubic-bezier(n,n,n,n) - cubic-bezier လုပ်ဆောင်ချက်တွင် သင့်ကိုယ်ပိုင်တန်ဖိုးများကို သတ်မှတ်နိုင်စေပါသည်။

အောက်ဖော်ပြပါ ဥပမာတွင် အသုံးပြုနိုင်သော မတူညီသော အမြန်နှုန်းမျဉ်းကွေးအချို့ကို ပြသသည်-

ဥပမာ

#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;}

Transition Effect ကိုနှောင့်နှေးပါ။

transition-delayအသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုအတွက် နှောင့်နှေးမှု (စက္ကန့်အတွင်း) ပိုင်ဆိုင်မှုကို သတ်မှတ်ပေးသည် ။

အောက်ပါ ဥပမာတွင် မစတင်မီ 1 စက္ကန့်နှောင့်နှေးမှု ရှိသည်-

ဥပမာ

div {
transition-delay: 1s;
}

ကူးပြောင်းခြင်း + အသွင်ပြောင်းခြင်း။

အောက်ဖော်ပြပါ ဥပမာသည် အသွင်ပြောင်းခြင်းသို့ ကူးပြောင်းခြင်းအကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည်-

ဥပမာ

div {
transition: width 2s, height 2s, transform 2s;
}

နောက်ထပ် အကူးအပြောင်း ဥပမာများ

CSS အသွင်ကူးပြောင်းမှု ဂုဏ်သတ္တိများကို ဤကဲ့သို့ တစ်ခုပြီးတစ်ခု သတ်မှတ်နိုင်သည်-

ဥပမာ

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

သို့မဟုတ် လက်တိုပစ္စည်းကို အသုံးပြုခြင်း transitionဖြင့်

ဥပမာ

div {
transition: width 2s linear 1s;
}

CSS အသွင်ကူးပြောင်းမှု ဂုဏ်သတ္တိများ

အောက်ပါဇယားသည် CSS အသွင်ကူးပြောင်းမှု ဂုဏ်သတ္တိအားလုံးကို ဖော်ပြသည်-

Property	Description
transition	A shorthand property for setting the four transition properties into a single property
transition-delay	Specifies a delay (in seconds) for the transition effect
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property	Specifies the name of the CSS property the transition effect is for
transition-timing-function	Specifies the speed curve of the transition effect

❮ ယခင် နောက်တစ်ခု ❯

CSS ကျူတိုရီရယ်

CSS အဆင့်မြင့်

CSS တုံ့ပြန်မှု

CSS Grid

CSS SASS

CSS နမူနာများ

CSS ကိုးကားချက်များ

CSS အသွင်ကူးပြောင်းမှုများ