ဤအရာကို ပုံဖော်ကြည့်ပါ- သင်သည် ပရောဂျက်အသစ်တစ်ခုတွင် ပါဝင်ပြီး ကုဒ်ဘေ့စ်ထဲသို့ ဝင်ရောက်ပြီး ပထမနာရီအနည်းငယ်အတွင်းတွင် စိတ်ပျက်စရာကောင်းလောက်အောင် ရင်းနှီးသည့်အရာတစ်ခုကို သင်ရှာဖွေတွေ့ရှိခဲ့သည်။ ပုံစံစာရွက်များတစ်လျှောက်တွင် ပြန့်ကျဲနေသဖြင့် တူညီသောအခြေခံကာတွန်းများအတွက် @keyframes အဓိပ္ပါယ်ဖွင့်ဆိုချက်များစွာကို သင်တွေ့နိုင်သည်။ မတူညီသော အရောင်မှိန်ခြင်းသက်ရောက်မှုသုံးမျိုး၊ ဆလိုက်ပုံစံနှစ်မျိုး သို့မဟုတ် သုံးခု၊ ဇူးမ်အန်နီမေးရှင်းလက်တစ်ဆုပ်စာ၊ နှင့် အနည်းဆုံး မတူညီသောလှည့်ဖျားသည့် အန်နီမေးရှင်းနှစ်ခု အဘယ်ကြောင့်နည်း။ @keyframes pulse { { မှ အတိုင်းအတာ: 1; } သို့ { အတိုင်းအတာ: 1.1; } }
@keyframes ပိုကြီး-သွေးခုန်နှုန်း { 0%, 20%, 100% { အတိုင်းအတာ: 1; } 10%, 40% { အတိုင်းအတာ: 1.2; } }
ဒီဇာတ်လမ်းက ရင်းနှီးနေတယ်ဆိုရင် သင်တစ်ယောက်တည်းတော့ မဟုတ်ပါဘူး။ ပရောဂျက်အမျိုးမျိုးရှိ ကျွန်ုပ်၏အတွေ့အကြုံတွင်၊ ကျွန်ုပ်ပေးဆောင်နိုင်သည့် အကိုက်ညီဆုံးသောအမြန်အောင်မြင်မှုများထဲမှတစ်ခုမှာ သော့ဘောင်များကို စုစည်းပြီး စံသတ်မှတ်ခြင်းဖြစ်ပါသည်။ ကုဒ်ဘေ့စ်အသစ်တွင် ကျွန်ုပ်၏ပထမဆုံးလုပ်ဆောင်စရာများထဲမှတစ်ခုအဖြစ် ယခုရှင်းလင်းမှုကို ကျွန်ုပ်မျှော်လင့်နေသည့် ယုံကြည်စိတ်ချရသောပုံစံဖြစ်လာပါသည်။ Chaos နောက်ကွယ်က လော့ဂျစ် ဤအရာသည် သင်စဉ်းစားသောအခါ ပြီးပြည့်စုံသော အဓိပ္ပါယ်ရှိသည်။ ကျွန်ုပ်တို့အားလုံးသည် ကျွန်ုပ်တို့၏နေ့စဉ်လုပ်ငန်းဆောင်တာများတွင် တူညီသောအခြေခံကာတွန်းများကို အသုံးပြုသည်- အရောင်မှိန်ခြင်း၊ ဆလိုက်များ၊ ဇူးမ်များ၊ လှည့်ခြင်းများနှင့် အခြားဘုံသက်ရောက်မှုများ။ ဤကာတွန်းများသည် အလွန်ရိုးရှင်းပြီး အလုပ်ပြီးမြောက်စေရန်အတွက် လျင်မြန်သော @keyframes အဓိပ္ပါယ်ဖွင့်ဆိုရန် လွယ်ကူပါသည်။ ဗဟိုချုပ်ကိုင်မှုရှိသော ကာတွန်းစနစ်မရှိဘဲ၊ developer များသည် codebase တွင် အလားတူ ကာတွန်းများကို အခြားနေရာတွင် ရှိနေပြီဟု သတိမထားမိဘဲ ဤ keyframes များကို အစမှနေ၍ သဘာဝအတိုင်း ရေးကြသည်။ အဖွဲ့များသည် အပလီကေးရှင်း၏ မတူညီသော အစိတ်အပိုင်းများတစ်လျှောက် အပြိုင်လုပ်ဆောင်လေ့ရှိသောကြောင့် (ကျွန်ုပ်တို့အများစု ယနေ့ခေတ်တွင် ပြုလုပ်နေကြသော အစိတ်အပိုင်း-အခြေခံဗိသုကာများ) တွင် အလုပ်လုပ်သောအခါ အထူးသဖြင့် ဤအရာသည် အဖြစ်များပါသည်။ ရလဒ်? Animation ပရမ်းပတာ။ အသေးအမွှားပြဿနာ keyframes ပွားခြင်းဆိုင်ရာ အထင်ရှားဆုံး ပြဿနာများမှာ ဖွံ့ဖြိုးတိုးတက်မှုအချိန်ကို ဖြုန်းတီးခြင်းနှင့် မလိုအပ်သော ကုဒ်များ ဖောင်းပွခြင်း တို့ဖြစ်သည်။ ကီးဘောင်များစွာ၏ အဓိပ္ပါယ်ဖွင့်ဆိုချက်များသည် လိုအပ်ချက်များ ပြောင်းလဲသည့်အခါ အပ်ဒိတ်လုပ်ရန် နေရာများစွာကို ဆိုလိုသည်။ သင်၏ အရောင်မှိန်နေသော ကာတွန်း၏ အချိန်ကို ချိန်ညှိရန် လိုအပ်ပါသလား။ သင်၏ codebase တစ်လျှောက်ရှိ ဖြစ်ရပ်တိုင်းကို ရှာဖွေရန် လိုအပ်ပါသည်။ ဖြေလျှော့ခြင်းလုပ်ဆောင်ချက်များကို စံသတ်မှတ်လိုပါသလား။ အမျိုးကွဲတွေအားလုံးကို တွေ့ရတာ ကံကောင်းပါတယ်။ ပြုပြင်ထိန်းသိမ်းမှုအချက်များ မြှောက်ပေးခြင်းသည် ရိုးရှင်းသော ကာတွန်းရုပ်ပုံများကိုပင် အချိန်ကုန်စေသော အလုပ်တစ်ခု ဖြစ်စေသည်။ ပိုကြီးတဲ့ပြဿနာ ဤသော့ဘောင်များ ထပ်ပွားခြင်းသည် မျက်နှာပြင်အောက်တွင် ပုန်းအောင်းနေသော ပိုမိုဆိုးရွားသော ပြဿနာကို ဖန်တီးသည်- ကမ္ဘာလုံးဆိုင်ရာ နယ်ပယ်ထောင်ချောက်။ အစိတ်အပိုင်းအခြေခံဗိသုကာများနှင့်အလုပ်လုပ်သောအခါတွင်ပင် CSS သော့ဘောင်များသည် ကမ္ဘာလုံးဆိုင်ရာနယ်ပယ်တွင် အမြဲတမ်းသတ်မှတ်ထားသည်။ ဆိုလိုသည်မှာ သော့ဘောင်အားလုံးသည် အစိတ်အပိုင်းအားလုံးအတွက် သက်ရောက်မှုရှိသည်။ အမြဲတမ်း။ ဟုတ်ပါသည်၊ သင်၏ ကာတွန်းသည် သင့်အစိတ်အပိုင်းတွင် သင်သတ်မှတ်ထားသော ကီးဘောင်များကို မလိုအပ်ပါ။ ၎င်းသည် ကမ္ဘာလုံးဆိုင်ရာနယ်ပယ်တွင် တင်ထားသည့် အမည်အတိအကျနှင့် ကိုက်ညီသည့် နောက်ဆုံးသော့ဘောင်များကို အသုံးပြုသည်။ သင်၏သော့ဘောင်အားလုံးသည် တူညီနေသရွေ့၊ ၎င်းသည် အသေးအဖွဲပြဿနာတစ်ခုဟု ထင်နိုင်သည်။ သို့သော် သတ်သတ်မှတ်မှတ်အသုံးပြုမှုကိစ္စအတွက် ကာတွန်းတစ်ခုကို စိတ်ကြိုက်ပြင်ဆင်လိုသည့်အခိုက်၊ သင်သည် ပြဿနာရှိနေသည် သို့မဟုတ် ပိုဆိုးသည်မှာ ၎င်းတို့ကို ဖြစ်စေသော အရာတစ်ခု ဖြစ်လာမည်ဖြစ်သည်။ သင့်ကာတွန်းဘောင်များနောက်တွင် တင်ထားသော အခြားအစိတ်အပိုင်းတစ်ခု၊ သင့်ကီးဖရမ်များကို ထပ်ရေးခြင်း သို့မဟုတ် သင့်အစိတ်အပိုင်းသည် နောက်ဆုံးတင်ပြီး ထိုကီးဘောင်၏အမည်ကို အသုံးပြုထားသည့် အခြားအစိတ်အပိုင်းတိုင်းအတွက် ကာတွန်းအပြုအမူကို မတော်တဆ ပြောင်းလဲသွားသောကြောင့် သော်လည်းကောင်း သင်သဘောမပေါက်နိုင်ပါ။ ဤသည်မှာ ပြဿနာကို သရုပ်ပြသော ရိုးရှင်းသော ဥပမာတစ်ခုဖြစ်သည်။ .component-one { /* အစိတ်အပိုင်းစတိုင်များ */ လှုပ်ရှားသက်ဝင်မှု- pulse 1s သက်တောင့်သက်သာ-အဝင်-ထွက် အဆုံးမရှိ သမရိုးကျ၊ }
/* ဤ @keyframes အဓိပ္ပါယ်ဖွင့်ဆိုချက် အလုပ်မလုပ်ပါ */ @keyframes pulse { { မှ အတိုင်းအတာ: 1; } သို့ { အတိုင်းအတာ: 1.1; } }
/* နောက်မှ ကုဒ်... */
.component- two { /* အစိတ်အပိုင်းစတိုင်များ */ လှုပ်ရှားသက်ဝင်မှု- pulse 1s သက်တောင့်သက်သာ-ဝင်-ထွက် အဆုံးမရှိ၊ }
/* ဤကီးဘောင်များသည် အစိတ်အပိုင်းနှစ်ခုလုံးအတွက် သက်ရောက်လိမ့်မည်*/ @keyframes pulse { 0%, 20%, 100% { အတိုင်းအတာ: 1; } 10%, 40% { အတိုင်းအတာ: 1.2; } }
အစိတ်အပိုင်းနှစ်ခုစလုံးသည် တူညီသောကာတွန်းအမည်ကို အသုံးပြုသော်လည်း၊ ဒုတိယ @keyframes အဓိပ္ပါယ်ဖွင့်ဆိုချက်သည် ပထမတစ်ခုကို ထပ်ရေးထားသည်။ ယခု အစိတ်အပိုင်း-တစ်နှင့် အစိတ်အပိုင်း-နှစ်ခု စလုံးသည် မည်သည့် သော့ဘောင်ဘောင်များကို သတ်မှတ်သည်ဖြစ်စေ မည်သည့် အစိတ်အပိုင်းကိုမဆို ဒုတိယကီးဘောင်များကို အသုံးပြုပါမည်။ Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 1 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ အဆိုးဆုံးအပိုင်း? ၎င်းသည် ဒေသတွင်း ဖွံ့ဖြိုးတိုးတက်မှုတွင် မကြာခဏ ပြီးပြည့်စုံစွာ အလုပ်လုပ်သော်လည်း တည်ဆောက်မှု လုပ်ငန်းစဉ်များသည် သင့်စတိုင်စာရွက်များ တင်ခြင်းအစီအစဥ်ကို ပြောင်းလဲသောအခါတွင် ထုတ်လုပ်မှုတွင် ထူးထူးခြားခြား ကွဲသွားပါသည်။ မည်သည့် အစိတ်အပိုင်းများ တင်ဆောင်သည်နှင့် မည်သည့် အမျိုးအစား ပေါ်မူတည်ပြီး ကွဲပြားစွာ ပြုမူသော ကာတွန်းများဖြင့် သင် အဆုံးသတ်ပါသည်။ ဖြေရှင်းချက်- ပေါင်းစည်းထားသော ကီးဘောင်များ ဤမငြိမ်မသက်မှုများအတွက် အဖြေသည် အံ့သြစရာကောင်းလောက်အောင် ရိုးရှင်းပါသည်- မျှဝေထားသော ပုံစံစာရွက်တွင် သိမ်းဆည်းထားသော ကြိုတင်သတ်မှတ်ထားသော တက်ကြွသောကီးဘောင်များ။ အစိတ်အပိုင်းတိုင်းကို ၎င်း၏ကိုယ်ပိုင်ကာတွန်းရုပ်ပုံများကို သတ်မှတ်ခွင့်ပြုမည့်အစား၊ ကျွန်ုပ်တို့သည် ကောင်းစွာမှတ်တမ်းတင်ထားသော၊ လွယ်ကူသောဗဟိုချက်ဘောင်များကို ဖန်တီးပါသည်။အသုံးပြုရန်၊ ထိန်းသိမ်းနိုင်သော၊ သင့်ပရောဂျက်၏ သီးခြားလိုအပ်ချက်များနှင့် အံဝင်ခွင်ကျဖြစ်စေသည်။ ၎င်းကို keyframes တိုကင်များအဖြစ် စဉ်းစားပါ။ အရောင်များနှင့် အကွာအဝေးအတွက် တိုကင်များကို ကျွန်ုပ်တို့အသုံးပြုသကဲ့သို့၊ ကျွန်ုပ်တို့အများစုသည် ကြာချိန်နှင့် ဖြေလျှော့ပေးသည့်လုပ်ဆောင်ချက်များကဲ့သို့ ကာတွန်းဂုဏ်သတ္တိများအတွက် တိုကင်များကို အသုံးပြုထားပြီးဖြစ်သောကြောင့် ကီးဖရမ်များအတွက် တိုကင်များကို အဘယ်ကြောင့် အသုံးမပြုသင့်သနည်း။ ဤချဉ်းကပ်နည်းသည် သင်အသုံးပြုနေသည့် လက်ရှိဒီဇိုင်းတိုကင်လုပ်ငန်းအသွားအလာနှင့် သဘာဝကျကျ ပေါင်းစပ်နိုင်ပြီး ပြဿနာသေးသေး (ကုဒ်ပွားခြင်း) နှင့် ပိုကြီးသောပြဿနာ (ကမ္ဘာလုံးဆိုင်ရာ ပဋိပက္ခများ) ကို တစ်ကြိမ်တည်းတွင် ဖြေရှင်းနိုင်ပါသည်။ စိတ်ကူးသည် ရိုးရှင်းပါသည်- ကျွန်ုပ်တို့၏ ဘုံကာတွန်းအားလုံးအတွက် အမှန်တရား၏ အရင်းအမြစ်တစ်ခု ဖန်တီးပါ။ ဤမျှဝေထားသော ပုံစံစာရွက်တွင် ကျွန်ုပ်တို့၏ပရောဂျက် အမှန်တကယ်အသုံးပြုသည့် ကာတွန်းပုံစံများကို ဖုံးအုပ်ထားသော ဂရုတစိုက်ပြုလုပ်ထားသော သော့ဘောင်များပါရှိသည်။ ကျွန်ုပ်တို့၏ codebase တွင် မှိန်ဖျော့သော အန်နီမေးရှင်းတစ်ခု ရှိနှင့်ပြီးပြီလားဟု မှန်းဆစရာမရှိတော့ပါ။ အခြားအစိတ်အပိုင်းများမှ ကာတွန်းများကို မတော်တဆ overwrite လုပ်တော့မည်မဟုတ်ပါ။ သို့သော် ဤနေရာတွင် သော့ချက်ဖြစ်သည်- ၎င်းတို့သည် တည်ငြိမ်သော ကော်ပီကူးထည့်ထားသော ကာတွန်းများ မဟုတ်ပါ။ ၎င်းတို့ကို CSS စိတ်ကြိုက်ဂုဏ်သတ္တိများမှတစ်ဆင့် သွက်လက်ပြီး စိတ်ကြိုက်ပြင်ဆင်နိုင်စေရန် ဒီဇိုင်းထုတ်ထားပြီး တစ်နေရာတည်းတွင် အနည်းငယ်ပိုကြီးသော “pulse” ကာတွန်းရုပ်ပြလိုလျှင် တစ်နေရာတည်းတွင် လှုပ်ရှားသက်ဝင်မှုများအား လိုက်လျောညီထွေဖြစ်အောင် လိုက်လျောညီထွေဖြစ်အောင် လိုက်လျောညီထွေရှိစေမည့် လိုက်လျောညီထွေရှိမှုကို ဆက်လက်ထိန်းသိမ်းထားနိုင်စေမည်ဖြစ်သည်။ ပထမဆုံး Keyframes တိုကင်ကို တည်ဆောက်ခြင်း။ ကျွန်ုပ်တို့ ကိုင်တွယ်ဖြေရှင်းသင့်သော ပထမဆုံး နိမ့်ကျနေသော သစ်သီးများထဲမှ တစ်ခုသည် “fade-in” ကာတွန်းဖြစ်သည်။ ကျွန်ုပ်၏ မကြာသေးမီက ပရောဂျက်တစ်ခုတွင်၊ သီးခြား မှိန်ဖျော့သော အဓိပ္ပါယ်ဖွင့်ဆိုချက် တစ်ဒါဇင်ကျော်ကို တွေ့ရှိခဲ့ပြီး၊ ၎င်းတို့အားလုံးသည် အလင်းပိတ်ခြင်းကို 0 မှ 1 အထိ သက်ဝင်လှုပ်ရှားစေပါသည်။ ထို့ကြောင့်၊ ပုံစံစာရွက်အသစ်တစ်ခုဖန်တီးလိုက်ကြပါစို့၊ ၎င်းကို kf-tokens.css ဟုခေါ်ဆိုကာ ၎င်းကို ကျွန်ုပ်တို့၏ပရောဂျက်တွင် ထည့်သွင်းကာ ၎င်း၏အတွင်းတွင် သင့်လျော်သောမှတ်ချက်များနှင့်အတူ ကျွန်ုပ်တို့၏သော့ဘောင်များကို ထည့်သွင်းလိုက်ကြပါစို့။ /* keyframes-tokens.css */
/* * Fade In - အရောင်မှိန်ဝင်ပေါက်ကာတွန်း * အသုံးပြုမှု- ကာတွန်းပုံ- kf-fade-in 0.3s သက်တောင့်သက်သာ-အထွက်။ */ @keyframes kf-fade-in { { မှ အလင်းပိတ်: 0; } သို့ { အလင်းပိတ်: 1; } }
ဤ @keyframes တစ်ခုတည်း ကြေငြာချက်သည် ကျွန်ုပ်တို့၏ကုဒ်ဘေ့စ်တစ်လျှောက်တွင် ပြန့်ကျဲနေသော မှိန်ဖျော့နေသော အန်နီမေးရှင်းအားလုံးကို အစားထိုးပါသည်။ သန့်ရှင်းမှု၊ ရိုးရှင်းပြီး ကမ္ဘာနှင့်အဝှမ်း အသုံးပြုနိုင်သည်။ ယခု ကျွန်ုပ်တို့တွင် ဤတိုကင်ကို သတ်မှတ်သတ်မှတ်ထားပြီး၊ ကျွန်ုပ်တို့၏ ပရောဂျက်တစ်လျှောက် မည်သည့်အစိတ်အပိုင်းမှ ၎င်းကို သုံးနိုင်သည်- .modal { အန်နီမေးရှင်း- kf-fade-in 0.3s သက်တောင့်သက်သာ-ထွက်ခြင်း; }
.tooltip { အန်နီမေးရှင်း- kf-fade-in 0.2s လွယ်ကူစွာ ဝင်-ထွက်၊ }
.အကြောင်းကြားချက် { အန်နီမေးရှင်း- kf-fade-in 0.5s သက်တောင့်သက်သာ-အထွက်၊ }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 2 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ မှတ်ချက်- ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ @keyframes အမည်များအားလုံးတွင် kf-ရှေ့ဆက်ကို အသုံးပြုနေပါသည်။ ဤရှေ့ဆက်သည် ပရောဂျက်ရှိ ရှိပြီးသား ကာတွန်းများနှင့် အမည်ပေးခြင်း ကွဲလွဲမှုများကို တားဆီးပေးသည့် namespace အဖြစ် လုပ်ဆောင်ပြီး ဤသော့ဖရိမ်များသည် ကျွန်ုပ်တို့၏ သော့ဘောင်တိုကင်ဖိုင်မှ လာကြောင်း ချက်ချင်း ရှင်းလင်းစေသည်။ Dynamic Slide ပြုလုပ်ခြင်း။ kf-fade-in keyframes သည် ရိုးရှင်းပြီး အရာများကို ရှုပ်ချရန် နေရာအနည်းငယ်သာရှိသောကြောင့် ကောင်းမွန်စွာအလုပ်လုပ်ပါသည်။ သို့သော်လည်း အခြားသော ကာတွန်းကားများတွင် ကျွန်ုပ်တို့သည် ပိုမိုသွက်လက်မှုရှိရန် လိုအပ်ပြီး ဤနေရာတွင် ကျွန်ုပ်တို့သည် CSS စိတ်ကြိုက်ဂုဏ်သတ္တိများ၏ ကြီးမားသောစွမ်းအားကို အသုံးချနိုင်ပါသည်။ ဤနေရာတွင် ပြန့်ကျဲနေသော ငြိမ်သက်နေသော ကာတွန်းများနှင့် နှိုင်းယှဉ်ပါက ကီးဖရိမ်တိုကင်များ အမှန်တကယ် တောက်ပနေပါသည်။ သာမာန်အခြေအနေတစ်ခုကို ကြည့်ကြပါစို့- "slide-in" ကာတွန်းများ။ ဒါပေမယ့် ဘယ်ကနေ လျှောချလဲ။ ညာဘက်မှ 100px? ဘယ်ဘက်ကနေ 50%? ဖန်သားပြင်၏ ထိပ်မှ ဝင်သင့်ပါသလား။ ဒါမှမဟုတ် အောက်ခြေကနေ လွင့်နေသလား။ ဖြစ်နိုင်ခြေများစွာရှိသော်လည်း ဦးတည်ချက်တစ်ခုစီနှင့် ကွဲပြားမှုတစ်ခုစီအတွက် သီးခြားသော့ဘောင်များကို ဖန်တီးမည့်အစား၊ အခြေအနေအားလုံးနှင့် လိုက်လျောညီထွေဖြစ်စေမည့် ပြောင်းလွယ်ပြင်လွယ် တိုကင်တစ်ခုကို ကျွန်ုပ်တို့ တည်ဆောက်နိုင်သည်- /* * Slide In - ဦးတည်ချက်ဆလိုက် ကာတွန်း * ဦးတည်ချက်ကို ထိန်းချုပ်ရန် --kf-slide-from ကိုသုံးပါ။ * ပုံသေ- ဘယ်ဘက်မှ လျှောများ (-100%) *အသုံးပြုမှု- * အန်နီမေးရှင်း- kf-slide-in 0.3s လွယ်ကူမှု-ထွက်။ * --kf-slide-from: -100px 0; // ဘယ်ဘက်မှလျှော * --kf-slide-from: 100px 0; // ညာဘက်မှလျှော * --kf-slide-from: 0 -50px; // အပေါ်မှလျှော */
@keyframes kf-slide-in { { မှ ဘာသာပြန်ရန်- var(--kf-slide-from၊ -100% 0); } သို့ { ဘာသာပြန်ဆို: 0 0; } }
ယခု ကျွန်ုပ်တို့သည် ဤတစ်ခုတည်းသော @keyframes တိုကင်အား --kf-slide-မှ စိတ်ကြိုက်ပိုင်ဆိုင်မှုကို ပြောင်းလဲခြင်းဖြင့် မည်သည့် slide direction အတွက်မဆို ရိုးရှင်းစွာအသုံးပြုနိုင်သည်- .sidebar { အန်နီမေးရှင်း- kf-slide-in 0.3s သက်တောင့်သက်သာ-အထွက်၊ /* မူရင်းတန်ဖိုးကို အသုံးပြုသည်- ဘယ်ဘက်မှ ဆလိုက်များ */ }
.အကြောင်းကြားချက် { အန်နီမေးရှင်း- kf-slide-in 0.4s သက်တောင့်သက်သာ-အထွက်၊ --kf-slide-from: 0 -50px; /* အပေါ်မှလျှော*/ }
.modal { ကာတွန်း kf-fade-in 0.5s၊ kf-slide-in 0.5s cubic-bezier(0.34၊ 1.56၊ 0.64၊ 1); --kf-slide-from: 50px 50px; /*အောက်ခြေ-ညာဘက်မှလျှော*/ }
ဤနည်းလမ်းသည် လိုက်လျောညီထွေရှိမှုကို ထိန်းသိမ်းထားစဉ် မယုံနိုင်လောက်အောင် ပျော့ပြောင်းမှုကို ပေးသည်။ သော့ဘောင်တစ်ခု ကြေငြာချက်၊ အဆုံးမဲ့ဖြစ်နိုင်ချေများ။ Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 3 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ ကာတွန်းများကို ပို၍ လိုက်လျောညီထွေဖြစ်အောင် ပြုလုပ်လိုပါက “slide-out” အကျိုးသက်ရောက်မှုများကိုလည်း ခွင့်ပြုနိုင်သည်၊နောက်အပိုင်းတွင်မြင်ရမည့်အရာနှင့်ဆင်တူသော --kf-slide-to စိတ်ကြိုက်ပိုင်ဆိုင်မှုတစ်ခုကို ထည့်ပါ။ Bidirectional Zoom Keyframes ပရောဂျက်များတစ်လျှောက် ထပ်ပွားနေသည့် နောက်ထပ်အဖြစ်များသည့် ကာတွန်းကားမှာ "ချုံ့ချဲ့" သက်ရောက်မှုများဖြစ်သည်။ Toast မက်ဆေ့ဂျ်များအတွက် သိမ်မွေ့သောစကေးကို ချဲ့ထွင်ခြင်းဖြစ်စေ၊ မော်ဒယ်များအတွက် သိသိသာသာ ချုံ့ချဲ့ခြင်း သို့မဟုတ် ခေါင်းစီးများအတွက် ဖြည်းညှင်းစွာ စကေးချပေးသည့်အကျိုးသက်ရောက်မှုဖြစ်စေ၊ ဇူးမ်အန်နီမေးရှင်းများသည် နေရာတိုင်းတွင်ရှိသည်။ စကေးတန်ဖိုးတစ်ခုစီအတွက် သီးခြားကီးဘောင်များကို ဖန်တီးမည့်အစား၊ ပြောင်းလွယ်ပြင်လွယ်ရှိသော kf-zoom ကီးဖရမ်တစ်ခုစီကို တည်ဆောက်ကြပါစို့။
/* * Zoom - စကေးကာတွန်း * စကေးတန်ဖိုးများကို ထိန်းချုပ်ရန် --kf-zoom-from နှင့် --kf-zoom-တို့အား အသုံးပြုပါ။ * ပုံသေ- 80% မှ 100% (0.8 မှ 1) ထိ ချုံ့ချဲ့ပါ။ *အသုံးပြုမှု- * အန်နီမေးရှင်း- kf-zoom 0.2s သက်တောင့်သက်သာ-ထွက်။ * --kf-zoom-from: 0.5; --kf-zoom-to- 1; // Zoom 50% မှ 100% * --kf-zoom-from: 1; --kf-zoom-to- 0; // Zoom 100% မှ 0% * --kf-zoom-from: 1; --kf-zoom-to- 1.1; // Zoom 100% မှ 110% */
@keyframes kf-zoom { { မှ အတိုင်းအတာ- var(--kf-zoom-from၊ 0.8); } သို့ { အတိုင်းအတာ- var(--kf-zoom-to, 1); } }
အဓိပ္ပါယ်တစ်ခုတည်းဖြင့်၊ ကျွန်ုပ်တို့လိုအပ်သော ချဲ့ထွင်မှုပုံစံကို ရရှိနိုင်ပါသည်။ .toast { ကာတွန်း kf-slide-in 0.2s၊ kf-zoom 0.4s သက်တောင့်သက်သာ-အထွက်၊ --kf-slide-from: 0 100%; /* အပေါ်မှလျှော*/ /* မူရင်း zoom ကို အသုံးပြုသည်- အတိုင်းအတာ 80% မှ 100% */ }
.modal { ကာတွန်း- kf-zoom 0.3s cubic-bezier(0.34၊ 1.56၊ 0.64၊ 1); --kf-zoom-from: 0; /* ဒရာမာ ဇူးမ် 0% မှ 100% */ }
.ခေါင်းစဉ် { ကာတွန်း kf-fade-in 2s၊ kf-zoom 2s သက်တောင့်သက်သာရှိမှု၊ --kf-zoom-from: 1.2; --kf-zoom-to- 0.8; /* ဖြည်းညှင်းစွာ လျှော့ပါ*/ }
0.8 (80%) ၏ ပုံသေသည် မုန့်ဖုတ်စာများနှင့် ကတ်များကဲ့သို့ UI အစိတ်အပိုင်းအများစုအတွက် ကောင်းမွန်စွာလုပ်ဆောင်နိုင်ပြီး အထူးကိစ္စများအတွက် စိတ်ကြိုက်ပြင်ဆင်ရန် လွယ်ကူနေဆဲဖြစ်သည်။ Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 4 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ မကြာသေးမီက နမူနာများတွင် စိတ်ဝင်စားဖွယ်အရာတစ်ခုကို သင်သတိပြုမိနိုင်ပါသည်- ကျွန်ုပ်တို့သည် ကာတွန်းများကို ပေါင်းစပ်ထားသည်။ @keyframes တိုကင်များနှင့် အလုပ်လုပ်ခြင်း၏ အဓိကအားသာချက်များထဲမှတစ်ခုမှာ ၎င်းတို့သည် တစ်ခုနှင့်တစ်ခု ချောမွေ့စွာ ပေါင်းစပ်နိုင်ရန် ဒီဇိုင်းထုတ်ထားခြင်းဖြစ်ပါသည်။ ဤချောမွေ့သောဖွဲ့စည်းမှုသည် ရည်ရွယ်ချက်ရှိရှိ၊ မတော်တဆမဟုတ်ပေ။ ၎င်းတို့သည် ပြဿနာဖြစ်လာနိုင်သည့်နေရာ အပါအဝင် ကာတွန်းဖွဲ့စည်းမှုကို နောက်ပိုင်းတွင် အသေးစိတ်ဆွေးနွေးကြမည်ဖြစ်သော်လည်း ပေါင်းစပ်အများစုသည် ရိုးရှင်းပြီး အကောင်အထည်ဖော်ရလွယ်ကူပါသည်။ မှတ်ချက်- ဒီဆောင်းပါးကိုရေးနေရင်းနဲ့ ရေးနေတာကြောင့်လည်း ဝင်ပေါက်ကာတွန်းရုပ်ရှင်တွေရဲ့ စိတ်ကူးတစ်ခုလုံးကို ပြန်လည်တွေးတောမိတာလည်း ဖြစ်နိုင်ပါတယ်။ CSS တွင် မကြာသေးမီက တိုးတက်မှုများနှင့်အတူ၊ ၎င်းတို့ကို ကျွန်ုပ်တို့ လိုအပ်နေသေးပါသလား။ ကံကောင်းစွာဖြင့်၊ Adam Argyle သည် အလားတူမေးခွန်းများကို စူးစမ်းလေ့လာပြီး ၎င်း၏ဘလော့ဂ်တွင် တောက်ပစွာဖော်ပြခဲ့သည်။ ဤသည်မှာ ဤနေရာတွင် ရေးထားသည့်အရာနှင့် ဆန့်ကျင်ဘက်မဟုတ်သော်လည်း၊ အထူးသဖြင့် သင်၏ပရောဂျက်များသည် ဝင်ပေါက်ကာတွန်းများကို အလွန်အမင်း အားကိုးနေပါက ထည့်သွင်းစဉ်းစားသင့်သည့် ချဉ်းကပ်နည်းကို တင်ပြပါသည်။ အဆက်မပြတ်လှုပ်ရှား “မှိန်”၊ “ဆလိုက်” နှင့် “ချုံ့ချဲ့” ကဲ့သို့သော ဝင်ပေါက်ကာတွန်းရုပ်များသည် တစ်ကြိမ်နှင့်ရပ်တန့်သွားချိန်တွင် အာရုံစူးစိုက်မှုဆွဲရန် သို့မဟုတ် လက်ရှိလုပ်ဆောင်နေသော လုပ်ဆောင်ချက်ကို ညွှန်ပြရန်အတွက် ဆက်တိုက်လှုပ်ရှားနေသော ကာတွန်းများသည် အကန့်အသတ်မရှိ လှည့်ပတ်နေပါသည်။ ကျွန်ုပ်ကြုံတွေ့ရသော အဖြစ်အများဆုံး အဆက်မပြတ် ကာတွန်း နှစ်ခုမှာ "လှည့်ခြင်း" (အညွှန်းများ တင်ခြင်းအတွက်) နှင့် "pulse" (အရေးကြီးသော အစိတ်အပိုင်းများကို မီးမောင်းထိုးပြရန်အတွက်) ဖြစ်သည်။ ကီးဖရိမ်တိုကင်များ ဖန်တီးခြင်းနှင့်ပတ်သက်၍ ဤကာတွန်းများသည် ထူးခြားသောစိန်ခေါ်မှုများကို တင်ပြသည်။ ပုံမှန်အားဖြင့် ပြည်နယ်တစ်ခုမှ အခြားတစ်ခုသို့ သွားသော ဝင်ပေါက်ကာတွန်းများနှင့် မတူဘဲ၊ စဉ်ဆက်မပြတ် ကာတွန်းများသည် ၎င်းတို့၏ အပြုအမူပုံစံများတွင် စိတ်ကြိုက်ပြင်ဆင်ရန် လိုအပ်ပါသည်။ အလှည့်ကျဆရာဝန် ပရောဂျက်တိုင်းသည် လှည့်ဖျားကာတွန်းများစွာကို အသုံးပြုထားပုံရသည်။ အချို့က နာရီလက်တံအတိုင်း လှည့်ကြပြီး အချို့က နာရီလက်တံအတိုင်း လှည့်ကြသည်။ အချို့က 360 ဒီဂရီ လှည့်ပတ်မှု တစ်ခုတည်းကို ပြုလုပ်ကြပြီး အချို့က ပိုမိုမြန်ဆန်သော အကျိုးသက်ရောက်မှုအတွက် အလှည့်များစွာ ပြုလုပ်ကြသည်။ ကွဲပြားမှုတစ်ခုစီအတွက် သီးခြားကီးဘောင်များ ဖန်တီးမည့်အစား၊ အခြေအနေအားလုံးကို ကိုင်တွယ်နိုင်သည့် ပြောင်းလွယ်ပြင်လွယ်လှည့်ဖျားမှုတစ်ခုကို တည်ဆောက်ကြပါစို့။
/* * Spin - လည်ပတ်ကာတွန်း * လည်ပတ်မှုအပိုင်းကို ထိန်းချုပ်ရန် --kf-spin-from နှင့် --kf-spin-to ကိုသုံးပါ။ * လည်ပတ်မှုပမာဏကို ထိန်းချုပ်ရန် --kf-spin-turns ကိုသုံးပါ။ * ပုံသေ- 0deg မှ 360deg သို့ လှည့်သည် (1 full rotation) *အသုံးပြုမှု- * ကာတွန်း- kf-လှည့်ပတ် 1s မျဉ်းကြောင်းအတိုင်း အဆုံးမရှိ၊ * --kf-spin-turns: 2; // လှည့်ပတ်မှု အပြည့် * --kf-spin-from: 0deg; --kf-လှည့်ရန်- 180deg; // တစ်ဝက်လှည့် * --kf-spin-from: 0deg; --kf-လှည့်ရန်--360deg; // လက်ယာရစ် */
@keyframes kf-spin { { မှ လှည့်ခြင်း- var(--kf-spin-from, 0deg); } သို့ { rotate: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
ယခုကျွန်ုပ်တို့နှစ်သက်သည့် လှည့်ခြင်းပုံစံကို ဖန်တီးနိုင်သည်-
.loading-spinner { ကာတွန်း- kf-spin 1s လိုင်းနား အဆုံးမရှိ၊ /* ပုံသေကိုအသုံးပြုသည်- 0deg မှ 360deg သို့လှည့်သည်*/ }
.fast-loader { အန်နီမေးရှင်း- kf-spin 1.2s သက်တောင့်သက်သာ-အဝင်-အထွက် အဆုံးမရှိ အလှည့်ကျ၊ --kf-spin-turns: 3; /* စက်ဝိုင်းတစ်ခုစီအတွက် ဦးတည်ချက်တစ်ခုစီအတွက် အပြည့်လှည့်ခြင်း ၃ ခု*/ }
.steped-reverse { ကာတွန်း- kf-spin 1.5s အဆင့်(8) အဆုံးမရှိ၊ --kf-လှည့်ရန်--360deg; /*လက်ယာရစ်ပြန်လှည့်*/ }
.သိမ်မွေ့စွာ တွန့်လိမ် { အန်နီမေးရှင်း- kf-spin 2s သက်တောင့်သက်သာ-အဝင်-ထွက် အဆုံးမရှိ သမရိုးကျ၊ --kf-spin-from: -16deg; --kf-လှည့်ရန်- 32deg; /* တွန့်လိမ်နေသည့် ၃၆ ဒီဂရီ − ၁၈ ဒီဂရီ နှင့် + ၁၈ ဒီဂရီကြား */ }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 5 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ဤချဉ်းကပ်မှု၏ လှပမှုသည် တူညီသောသော့ဘောင်များသည် spinner များတင်ခြင်း၊ လှည့်ခြင်းသင်္ကေတများ၊ လှုပ်လှုပ်ရွရွပြုလုပ်မှုများနှင့် ရှုပ်ထွေးသောဘက်စုံကာတွန်းများကိုပင် လုပ်ဆောင်နိုင်ခြင်းကြောင့်ဖြစ်သည်။ Pulse Paradox Pulse animation များသည် မတူညီသော ဂုဏ်သတ္တိများကို "pulse" လုပ်နိုင်သောကြောင့် ပိုမိုရှုပ်ထွေးပါသည်။ အချို့က စကေးကို သွေးခုန်နှုန်း၊ အချို့က အလင်းအားကို တွန်းပို့သည်၊ အချို့သော အရောင်များသည် တောက်ပမှု သို့မဟုတ် ပြည့်ဝခြင်းကဲ့သို့သော သွေးခုန်နှုန်းအရောင်ဂုဏ်သတ္တိများရှိသည်။ ပစ္စည်းတစ်ခုစီအတွက် သီးခြားကီးဘောင်များကို ဖန်တီးခြင်းထက်၊ ကျွန်ုပ်တို့သည် မည်သည့် CSS ပိုင်ဆိုင်မှုနှင့်မဆို လုပ်ဆောင်နိုင်သော သော့ဘောင်များကို ဖန်တီးနိုင်သည်။ ဤသည်မှာ စကေးနှင့် အလင်းပိတ်မှု ရွေးချယ်စရာများပါရှိသော pulse keyframe ၏ ဥပမာတစ်ခုဖြစ်သည်။
/* * Pulse - ခုန်နေသော ကာတွန်း * စကေးအကွာအဝေးကို ထိန်းချုပ်ရန် --kf-pulse-scale-from နှင့် --kf-pulse-scale-to ကိုသုံးပါ။ * အလင်းအမှောင်အပိုင်းအခြားကို ထိန်းချုပ်ရန် --kf-pulse-opacity-from နှင့် --kf-pulse-opacity-တို့ကို အသုံးပြုပါ။ * ပုံသေ- သွေးခုန်နှုန်းမရှိ (တန်ဖိုးအားလုံး 1) *အသုံးပြုမှု- * အန်နီမေးရှင်း- kf-pulse 2s လွယ်ကူမှု-အဝင်-ထွက် အဆုံးမရှိ သမရိုးကျ၊ * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to- 1.05; // စကေးသွေးခုန်နှုန်း * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // opacity သွေးခုန်နှုန်း */
@keyframes kf-pulse { { မှ စကေး- var(--kf-pulse-scale-from, 1); opacity- var(--kf-pulse-opacity-from၊ 1); } သို့ { စကေး- var(--kf-pulse-scale-to, 1); opacity- var(--kf-pulse-opacity-to, 1); } }
၎င်းသည် ဂုဏ်သတ္တိများစွာကို သက်ဝင်လှုပ်ရှားစေနိုင်သည့် ပြောင်းလွယ်ပြင်လွယ် သွေးခုန်နှုန်းကို ဖန်တီးပေးသည်- .ဆော်သြရန် { အန်နီမေးရှင်း- kf-pulse 0.6s အဆုံးမရှိ အလှည့်ကျ၊ --kf-pulse-opacity-from: 0.5; /* opacity pulse*/ }
.အကြောင်းကြားချက်-အစက် { အန်နီမေးရှင်း- kf-pulse 0.6s သက်တောင့်သက်သာ-အဝင်-အထွက် အဆုံးမရှိ အလှည့်ကျ၊ --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to- 1.1; /*စကေးသွေးခုန်နှုန်း*/ }
.text-highlight { အန်နီမေးရှင်း- kf-pulse 1.5s သက်တောင့်သက်သာ အဆုံးမရှိ၊ --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* အတိုင်းအတာ နှင့် အလင်းပိတ်သွေးခုန်နှုန်း */ }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 6 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ဤ kf-pulse keyframe တစ်ခုတည်းသည် သိမ်မွေ့သော အာရုံစူးစိုက်မှုကို ဖမ်းစားနိုင်မှုမှ အရာအားလုံးကို စိတ်ကြိုက်ပြင်ဆင်ရန် လွယ်ကူစေပြီး အားလုံးအား သိသိသာသာ ပေါ်လွင်စေပါသည်။ အဆင့်မြင့် ဖြေလျှော့မှု keyframes တိုကင်များကိုအသုံးပြုခြင်းနှင့်ပတ်သက်သည့် အကောင်းဆုံးအရာများထဲမှတစ်ခုမှာ elastic သို့မဟုတ် bounce ကဲ့သို့သော developer အများစုသည် အစမှမရေးရန် အနှောက်အယှက်ဖြစ်စေသော အကျိုးသက်ရောက်မှုများကို ကျွန်ုပ်တို့၏ကာတွန်းစာကြည့်တိုက်ကို ချဲ့ထွင်ရန် မည်မျှလွယ်ကူပါသည်။ ဤသည်မှာ ခုန်အမြင့်ကို ထိန်းချုပ်ရန် --kf-bounce-မှ စိတ်ကြိုက်ပိုင်ဆိုင်မှုကို အသုံးပြုသည့် ရိုးရှင်းသော "ဘောင်ဝင်ခြင်း" သော့ဘောင်တိုကင်၏ ဥပမာတစ်ခုဖြစ်သည်။ /* * Bounce - ခုန်ပေါက်ဝင်ပေါက်ကာတွန်း * ခုန်အမြင့်ကိုထိန်းချုပ်ရန် --kf-bounce-from ကိုသုံးပါ။ * ပုံသေ- 100vh (မျက်နှာပြင်ပိတ်) မှခုန်သည်။ *အသုံးပြုမှု- * အန်နီမေးရှင်း- kf-bounce 3s သက်တောင့်သက်သာရှိခြင်း။ * --kf-bounce-from: 200px; // 200px အမြင့်မှခုန်ပါ။ */
@keyframes kf-bounce { 0% { ဘာသာပြန်ဆိုချက်- 0 calc(var(--kf-bounce-from, 100vh) * -1); }
၃၄% { ဘာသာပြန်ဆိုချက်- 0 calc(var(--kf-bounce-from၊ 100vh) * -0.4); }
55% { ဘာသာပြန်ဆိုချက်- 0 calc(var(--kf-bounce-from၊ 100vh) * -0.2); }
72% { ဘာသာပြန်ဆိုချက်- 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { ဘာသာပြန်ဆိုချက်- 0 calc(var(--kf-bounce-from၊ 100vh) * -0.05); }
94% { ဘာသာပြန်ဆိုချက်- 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { ဘာသာပြန်ဆိုချက်- 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { ဘာသာပြန်ဆို: 0 0; animation-time-function- သက်တောင့်သက်သာ-ထွက်; } }
“elastic” ကဲ့သို့သော အန်နီမေးရှင်းများသည် သော့ဘောင်ဘောင်အတွင်း တွက်ချက်မှုများကြောင့် အနည်းငယ် ရှုပ်ထွေးသည်။ ကျွန်ုပ်တို့သည် --kf-elastic-from-X နှင့် --kf-elastic-from-Y သီးခြားစီ သတ်မှတ်ရန် လိုအပ်သည် (နှစ်ခုလုံးသည် ရွေးချယ်နိုင်သည်)၊ ၎င်းတို့သည် ဖန်သားပြင်ပေါ်ရှိ မည်သည့်နေရာမှမဆို elastic ဝင်ပေါက်တစ်ခုကို အတူတကွ ဖန်တီးခွင့်ပေးသည်။
/* * Elastic In - elastic ဝင်ပေါက်ကာတွန်း * စတင်အနေအထားကို ထိန်းချုပ်ရန် --kf-elastic-from-X နှင့် --kf-elastic-from-Y ကို အသုံးပြုပါ။ * ပုံသေ- အလယ်ဗဟိုမှ ဝင်သည် (0, -100vh) *အသုံးပြုမှု- * အန်နီမေးရှင်း- kf-elastic-in 2s နှစ်ခုစလုံးကို လွယ်ကူစွာ-ဝင်-ထွက်၊ * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px၊ -200px) မှ ရိုက်ထည့်ပါ။ */
@keyframes kf-elastic-in { 0% { ဘာသာပြန်ရန်- calc(var(--kf-elastic-from-X၊ -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { ဘာသာပြန်ရန်- calc(var(--kf-elastic-from-X၊ -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { ဘာသာပြန်ဆိုချက်- calc(var(--kf-elastic-from-X၊ -50vw) * 0.1312)calc(var(--kf-elastic-from-Y၊ 0px) * 0.1312); }
44% { ဘာသာပြန်ရန်- calc(var(--kf-elastic-from-X၊ -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { ဘာသာပြန်ရန်- calc(var(--kf-elastic-from-X၊ -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { ဘာသာပြန်ရန်- calc(var(--kf-elastic-from-X၊ -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { ဘာသာပြန်ရန်- calc(var(--kf-elastic-from-X၊ -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { ဘာသာပြန်ဆို: 0 0; } }
ဤနည်းလမ်းသည် ကျွန်ုပ်တို့၏ပရောဂျက်တစ်လျှောက် အဆင့်မြင့်သော့ဘောင်များကို စိတ်ကြိုက်ပြင်ဆင်ခြင်းနှင့် စိတ်ကြိုက်ပိုင်ဆိုင်မှုတစ်ခုတည်းကို ပြောင်းလဲခြင်းဖြင့် ၎င်းကို လွယ်ကူစွာ ပြန်လည်အသုံးပြုနိုင်စေသည်။
.bounce-and-zoom { ကာတွန်း kf-bounce 3s သက်တောင့်သက်သာရှိမှု၊ kf-zoom 3s linear; --kf-zoom-from: 0; }
.bounce-and-slide { ကာတွန်း-ဖွဲ့စည်းမှု- add; /* ကာတွန်းနှစ်ခုလုံးသည် ဘာသာပြန်ခြင်းကို အသုံးပြုသည်*/ ကာတွန်း kf-bounce 3s သက်တောင့်သက်သာရှိမှု၊ kf-slide-in 3s သက်တောင့်သက်သာ-အထွက်၊ --kf-slide-from: -200px; }
.elastic-in { ကာတွန်း- kf-elastic-in 2s နှစ်ခုစလုံးကို လွယ်ကူစွာ-ဝင်-ထွက်၊ }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 7 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ဤအချက်အထိ၊ ကျွန်ုပ်တို့သည် သော့ဘောင်များကို စမတ်ကျပြီး ထိရောက်သောနည်းလမ်းဖြင့် စုစည်းနိုင်ပုံကို ကျွန်ုပ်တို့တွေ့မြင်ရပါသည်။ ဟုတ်ပါတယ်၊ သင့်ပရောဂျက်ရဲ့ လိုအပ်ချက်တွေနဲ့ ကိုက်ညီအောင် အရာတွေကို ပြုပြင်ပြောင်းလဲချင်ပေမယ့် ဘုံအန်နီမေးရှင်းများစွာနဲ့ နေ့စဉ်အသုံးပြုမှုတွေရဲ့ နမူနာတွေကို ကျွန်ုပ်တို့ ဖော်ပြပေးထားပါတယ်။ ဤ keyframes တိုကင်များနှင့်အတူ၊ ယခု ကျွန်ုပ်တို့တွင် ပရောဂျက်တစ်ခုလုံးတွင် တသမတ်တည်း ထိန်းသိမ်းနိုင်သော ကာတွန်းများကို ဖန်တီးရန်အတွက် အားကောင်းသည့် အဆောက်အဦများ ရှိသည်။ ထပ်တူကျသော ကီးဘောင်များ မရှိတော့ပါ၊ ကမ္ဘာလုံးဆိုင်ရာ နယ်ပယ် ပဋိပက္ခများ မရှိတော့ပါ။ ကျွန်ုပ်တို့၏ကာတွန်းလိုအပ်ချက်အားလုံးကို ကိုင်တွယ်ရန် သန့်ရှင်းပြီး အဆင်ပြေသောနည်းလမ်းတစ်ခုသာဖြစ်သည်။ ဒါပေမယ့် တကယ့်မေးခွန်းကတော့ ဒီအဆောက်အဦတွေကို ဘယ်လိုပေါင်းစပ်မလဲ။ အားလုံးကို ပေါင်းစည်းလိုက်ပါ။ အခြေခံ keyframes တိုကင်များကို ပေါင်းစပ်ခြင်းသည် ရိုးရှင်းကြောင်း ကျွန်ုပ်တို့တွေ့မြင်ရပါသည်။ ပထမကာတွန်းကို သတ်မှတ်ရန်၊ ဒုတိယတစ်ခုကို သတ်မှတ်ရန်၊ လိုအပ်သလို ကိန်းရှင်များကို သတ်မှတ်ရန်မှတပါး အခြားအရာများကို ကျွန်ုပ်တို့ မလိုအပ်ပါ။ /* Fade in + slide in */ .toast { ကာတွန်း kf-fade-in 0.4s၊ kf-slide-in 0.4s cubic-bezier(0.34၊ 1.56၊ 0.64၊ 1); --kf-slide-from: 0 40px; }
/* Zoom in + fade in */ .modal { ကာတွန်း kf-fade-in 0.3s၊ kf-zoom 0.3s cubic-bezier(0.34၊ 1.56၊ 0.64၊ 1); --kf-zoom-from- 0.7; --kf-zoom-to- 1; }
/* လျှော + သွေးခုန်နှုန်း */ .အကြောင်းကြားချက် { ကာတွန်း kf-slide-in 0.5s၊ kf-pulse 1.2s သက်တောင့်သက်သာ-အဝင်-ထွက် အဆုံးမရှိ သမရိုးကျ၊ --kf-slide-from: -100px 0; --kf-pulse-စကေး-မှ- 0.95; --kf-pulse-scale-to- 1.05; }
ကာတွန်းတစ်ခုစီသည် မတူညီသော ပိုင်ဆိုင်မှုများကို ပစ်မှတ်ထားသောကြောင့် ဤပေါင်းစပ်မှုများသည် လှပစွာလုပ်ဆောင်နိုင်သည်- အလင်းပိတ်ခြင်း၊ အသွင်ပြောင်းခြင်း (ဘာသာပြန်ခြင်း/စကေး) စသည်တို့ဖြစ်သည်။ သို့သော် တစ်ခါတစ်ရံတွင် ကွဲလွဲမှုများရှိနေသဖြင့် ၎င်းတို့ကို အဘယ်ကြောင့် ကိုင်တွယ်ဖြေရှင်းရမည်ကို သိရန်လိုအပ်ပါသည်။ ကာတွန်းနှစ်ခုစလုံးသည် တူညီသောပိုင်ဆိုင်မှုကို လှုပ်ရှားရန်ကြိုးစားသောအခါ—ဥပမာ၊ ကာတွန်းစကေးနှစ်ခုလုံး သို့မဟုတ် ကာတွန်းအလင်းပြခြင်း နှစ်ခုလုံးသည် သင်မျှော်လင့်ထားသည့်အတိုင်း ဖြစ်လိမ့်မည်မဟုတ်ပေ။ ပုံသေအားဖြင့်၊ ကာတွန်းရုပ်ပုံများထဲမှ တစ်ခုသာ ကာတွန်းစာရင်းတွင် နောက်ဆုံးတစ်ခုဖြစ်သည့် ထိုပစ္စည်းကို အမှန်တကယ် အသုံးချပါသည်။ ဤသည်မှာ CSS သည် တူညီသောပိုင်ဆိုင်မှုရှိ ကာတွန်းများစွာကို ကိုင်တွယ်ပုံ၏ ကန့်သတ်ချက်ဖြစ်သည်။ ဥပမာအားဖြင့်၊ ၎င်းသည် kf-pulse လှုပ်ရှားသက်ဝင်မှုကိုသာ သက်ရောက်မှုရှိသောကြောင့် ၎င်းသည် ရည်ရွယ်ထားသည့်အတိုင်း အလုပ်မဖြစ်ပါ။ .bad-combo { ကာတွန်း kf-zoom 0.5s ရှေ့သို့၊ kf-pulse 1.2s အနန္တ အလှည့်ကျ၊ --kf-zoom-from- 0.5; --kf-zoom-to- 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to- 1.1; }
အန်နီမေးရှင်း ထပ်တိုး အရိုးရှင်းဆုံးနှင့် တိုက်ရိုက်အကျဆုံးနည်းလမ်းမှာ တူညီသောပစ္စည်းကိုအကျိုးသက်ရောက်စေသော ကာတွန်းများစွာကို ကိုင်တွယ်ရန်မှာ ကာတွန်း-ဖွဲ့စည်းမှုဆိုင်ရာ ပိုင်ဆိုင်မှုကို အသုံးပြုခြင်းဖြစ်သည်။ အထက်ဖော်ပြပါ နောက်ဆုံးဥပမာတွင်၊ kf-pulse ကာတွန်းသည် kf-zoom အန်နီမေးရှင်းကို အစားထိုးသည်၊ ထို့ကြောင့် ကျွန်ုပ်တို့သည် ကနဦးချုံ့ချဲ့မှုကို မတွေ့ရတော့ဘဲ မျှော်မှန်းစကေးကို 1.2 အထိ ရရှိမည်မဟုတ်ပါ။ ထည့်ရန် ကာတွန်း-ဖွဲ့စည်းမှုကို သတ်မှတ်ခြင်းဖြင့်၊ ကာတွန်းနှစ်ခုလုံးကို ပေါင်းစပ်ရန် ဘရောက်ဆာအား ကျွန်ုပ်တို့က ပြောပါသည်။ ဒါက ငါတို့လိုချင်တဲ့ ရလဒ်ကို ပေးတယ်။ .component- two { ကာတွန်း-ဖွဲ့စည်းမှု- add; }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 8 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ဤနည်းလမ်းသည် တူညီသောပိုင်ဆိုင်မှုအပေါ်သက်ရောက်မှုများကို ပေါင်းစပ်လိုသည့် ကိစ္စအများစုအတွက် ကောင်းစွာအလုပ်လုပ်ပါသည်။ ကာတွန်းရုပ်ပုံများကို static property တန်ဖိုးများနှင့် ပေါင်းစပ်ရန် လိုအပ်သောအခါတွင်လည်း အသုံးဝင်ပါသည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့တွင် ၎င်းကို ကျွန်ုပ်တို့အလိုရှိရာ အတိအကျနေရာချထားရန် ဘာသာပြန်ဆိုခွင့်ကို အသုံးပြုသည့်အရာတစ်ခုရှိပြီး၊ ထို့နောက် ၎င်းကို kf-slide-in keyframes ဖြင့် လှုပ်ရှားလိုပါက၊ Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 9 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ ကာတွန်း-ဖွဲ့စည်းမှုကို ထည့်သွင်းရန် သတ်မှတ်ထားသဖြင့်၊ ကာတွန်းရုပ်ပုံများသည် ရှိရင်းစွဲနှင့် ချောမွေ့စွာ ပေါင်းစပ်ထားသည်။အသွင်ပြောင်းမည်ဖြစ်သောကြောင့် ဒြပ်စင်သည် နေရာ၌ရှိနေကာ မျှော်လင့်ထားသည့်အတိုင်း လှုပ်ရှားနေပါသည်။ Animation ယိမ်းထိုးခြင်း။ ကာတွန်းများစွာကို ကိုင်တွယ်ခြင်း၏ နောက်နည်းလမ်းတစ်ခုမှာ ၎င်းတို့ကို “ယိမ်းထိုး” ရန်ဖြစ်သည်— ဆိုလိုသည်မှာ ပထမတစ်ခုပြီးသည်နှင့် အနည်းငယ်မျှ ဒုတိယကာတွန်းကို စတင်ပါ။ ၎င်းသည် ကိစ္စတိုင်းအတွက် အဆင်ပြေသော ဖြေရှင်းချက်မဟုတ်သော်လည်း ကျွန်ုပ်တို့တွင် ဝင်ပေါက်ကာတွန်းတစ်ခုရှိပြီး စဉ်ဆက်မပြတ် ကာတွန်းတစ်ခုဖြင့် လုပ်ဆောင်သည့်အခါ ၎င်းသည် အသုံးဝင်ပါသည်။ /* fade in + opacity pulse */ .အကြောင်းကြားချက် { ကာတွန်း kf-fade-in 2s သက်တောင့်သက်သာ-အထွက်၊ kf-pulse 0.5s 2s သက်တောင့်သက်သာ-အဝင်-ထွက် အဆုံးမရှိ သမရိုးကျ၊ --kf-pulse-opacity-to- 0.5; }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 10 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ အမိန့်ကိစ္စများ ကျွန်ုပ်တို့လုပ်ဆောင်သော ကာတွန်းရုပ်ပုံများ ၏ ကြီးမားသော အစိတ်အပိုင်းသည် ပြောင်းလဲခြင်း ပိုင်ဆိုင်မှုကို အသုံးပြုပါသည်။ ကိစ္စအများစုတွင်၊ ၎င်းသည်ရိုးရှင်းစွာပိုမိုအဆင်ပြေသည်။ ကာတွန်းရုပ်ပုံများကို GPU အရှိန်မြှင့်နိုင်သောကြောင့် ၎င်းသည် စွမ်းဆောင်ရည် အားသာချက်လည်း ရှိပါသည်။ သို့သော် ကျွန်ုပ်တို့သည် အသွင်ပြောင်းခြင်းကို အသုံးပြုပါက၊ ကျွန်ုပ်တို့၏ အသွင်ကူးပြောင်းမှုများကို လုပ်ဆောင်သည့် အစီအစဥ်သည် အရေးကြီးကြောင်း လက်ခံရန် လိုအပ်ပါသည်။ အများကြီး။ ကျွန်ုပ်တို့၏ သော့ဘောင်များတွင် ယခုအချိန်အထိ၊ ကျွန်ုပ်တို့သည် တစ်ဦးချင်း ပြောင်းလဲမှုများကို အသုံးပြုထားပါသည်။ သတ်မှတ်ချက်များအရ၊ ၎င်းတို့ကို ပုံသေအစီအစဥ်အတိုင်း အမြဲအသုံးပြုသည်- ပထမ၊ အစိတ်အပိုင်းကို ဘာသာပြန်ပြီး၊ ထို့နောက် လှည့်ကာ၊ ထို့နောက် အတိုင်းအတာ။ ဒါက အဓိပ္ပာယ်ရှိပြီး ကျွန်တော်တို့အများစု မျှော်လင့်ထားသလိုပါပဲ။ သို့သော်၊ ကျွန်ုပ်တို့သည် transform property ကိုအသုံးပြုပါက၊ function များကိုရေးထားသော order သည် ၎င်းတို့အသုံးပြုသည့် order ဖြစ်သည်။ ဤကိစ္စတွင်၊ ကျွန်ုပ်တို့သည် 100 pixels တစ်ခုခုကို X-axis ပေါ်ရွှေ့ပြီး 45 ဒီဂရီဖြင့် လှည့်ပါက၊ ၎င်းကို ပထမ 45 ဒီဂရီဖြင့် လှည့်ပြီးနောက် ၎င်းကို 100 pixels ရွှေ့ခြင်းနှင့် မတူပါ။ /* ပန်းရောင်စတုရန်း- ဦးစွာဘာသာပြန်ပါ၊ ထို့နောက် လှည့်ပါ */ .ဥပမာ-တစ်ခု { transform- translateX(100px) rotate(45deg); }
/* အစိမ်းရောင်စတုရန်း- ပထမအလှည့်၊ ထို့နောက် ဘာသာပြန်ပါ */ .ဥပမာ-နှစ် { transform: rotate(45deg) translateX(100px); }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 11 [လမ်းခွဲထားသော] ကိုကြည့်ပါ။ သို့သော် အသွင်ပြောင်းမှု အစီအစဉ်အရ၊ တစ်ဦးချင်း အသွင်ကူးပြောင်းမှုအားလုံး — keyframes တိုကင်များအတွက် ကျွန်ုပ်တို့အသုံးပြုထားသမျှ — အသွင်ပြောင်းလုပ်ဆောင်ချက်များမလုပ်ဆောင်မီတွင် ဖြစ်ပေါ်ပါသည်။ ဆိုလိုသည်မှာ ကာတွန်းရုပ်ပုံများပြီးနောက် အသွင်ပြောင်းခြင်းဆိုင်ရာ ပိုင်ဆိုင်မှုတွင် သင်သတ်မှတ်ထားသည့် မည်သည့်အရာမဆို ဖြစ်လာလိမ့်မည်ကို ဆိုလိုသည်။ သို့သော် ဥပမာအားဖြင့်၊ သင်သည် kf-spin keyframes ဖြင့် ဘာသာပြန်ဆိုခြင်းကို သတ်မှတ်ပါက၊ ကာတွန်းမတင်မီတွင် ဘာသာပြန်ဆိုမှု ဖြစ်လိမ့်မည်။ စိတ်ရှုပ်သေးလား?! ၎င်းသည် အောက်ဖော်ပြပါကိစ္စများတွင်ကဲ့သို့ တူညီသောကာတွန်းများအတွက် မတူညီသောရလဒ်များကို static တန်ဖိုးများဖြစ်ပေါ်စေနိုင်သည့် အခြေအနေများကို ဖြစ်ပေါ်စေသည်-
/* spinner နှစ်ခုလုံးအတွက် ဘုံကာတွန်း*/ .spinner { ကာတွန်း- kf-spin 1s လိုင်းနား အဆုံးမရှိ၊ }
/* ပန်းရောင်လှည့်ပတ်- ဘာသာပြန်ဆိုခြင်း (တစ်ဦးချင်းအသွင်ပြောင်းခြင်း) */ .spinner-ပန်းရောင် { ဘာသာပြန်ဆိုခြင်း- 100% 50%; }
/* Green spinner- လှည့်ပြီးနောက် ဘာသာပြန်ပါ (function order) */ .spinner-green { ပြောင်းလဲခြင်း- ဘာသာပြန်ဆိုခြင်း(100%, 50%); }
Amit Sheen မှ Pen Keyframes တိုကင်များ - Demo 12 [လမ်းဆုံလမ်းခွ] ကိုကြည့်ပါ။ ပထမဆုံး spinner (ပန်းရောင်) သည် kf-spin မလှည့်မီတွင် ဘာသာပြန်ဆိုချက်တစ်ခုရရှိသည်ကို သင်တွေ့မြင်နိုင်သည်၊ ထို့ကြောင့် ၎င်းသည် ၎င်း၏နေရာကို ဦးစွာရွှေ့ပြီးနောက် လှည့်သွားပါသည်။ ဒုတိယ spinner (အစိမ်းရောင်) သည် တစ်ဦးချင်းစီ အသွင်ပြောင်းပြီးနောက် ဖြစ်ပေါ်သည့် translate() လုပ်ဆောင်ချက်ကို ရရှိသည်၊ ထို့ကြောင့် ဒြပ်စင်သည် ဦးစွာ လှည့်သွားပြီးနောက် ၎င်း၏ လက်ရှိထောင့်နှင့် နှိုင်းယှဉ်ကာ ကျယ်ပြန့်သော ပတ်လမ်းအကျိုးသက်ရောက်မှုကို ရရှိသည်။ မဟုတ်ဘူး၊ ဒါက bug မဟုတ်ဘူး။ ၎င်းသည် CSS အကြောင်း သိထားရမည့် အရာများထဲမှ တစ်ခုဖြစ်ပြီး ကာတွန်းများစွာ သို့မဟုတ် အသွင်ပြောင်းမှုများစွာဖြင့် လုပ်ဆောင်သည့်အခါတွင် မှတ်သားထားရန် လိုအပ်ပါသည်။ လိုအပ်ပါက၊ သင်သည် rotate() လုပ်ဆောင်ချက်ကို အသုံးပြု၍ ဒြပ်စင်များကို လှည့်သည့် kf-spin-alt သော့ဖရိမ်၏ နောက်ထပ်အစုတစ်ခုကိုလည်း ဖန်တီးနိုင်သည်။ လှုပ်ရှားမှုကို လျှော့ချသည်။ အခြားသော့ဘောင်များအကြောင်း ကျွန်ုပ်တို့ပြောနေချိန်တွင်၊ ကျွန်ုပ်တို့သည် “ကာတွန်းမရှိ” ရွေးချယ်မှုကို လျစ်လျူရှု၍မရပါ။ keyframes တိုကင်များကိုအသုံးပြုခြင်း၏အကြီးမားဆုံးအားသာချက်တစ်ခုမှာ accessibility ကိုထည့်သွင်းနိုင်ပြီး၎င်းသည်တကယ်လုပ်ဆောင်ရန်အလွန်လွယ်ကူသည်။ ကျွန်ုပ်တို့၏ သော့ဘောင်ဘောင်များကို အသုံးပြုရလွယ်ကူစေရန် ဒီဇိုင်းထုတ်ခြင်းဖြင့်၊ လျှော့ရွှေ့လှုပ်ရှားမှုကို နှစ်သက်သော အသုံးပြုသူများသည် အပိုအလုပ် သို့မဟုတ် ကုဒ်ပွားခြင်းမရှိဘဲ ပိုမိုချောမွေ့သော၊ စိတ်အနှောင့်အယှက်ဖြစ်စေသော အတွေ့အကြုံကို ရရှိကြောင်း သေချာစေနိုင်ပါသည်။ "Reduced Motion" ၏တိကျသောအဓိပ္ပါယ်သည် ကာတွန်းတစ်ခုမှ နောက်တစ်ခုသို့ အနည်းငယ်ပြောင်းလဲနိုင်ပြီး ပရောဂျက်တစ်ခုမှ ပရောဂျက်တစ်ခုသို့ ပြောင်းလဲနိုင်သော်လည်း ဤအရာများကို မှတ်သားထားရန် အရေးကြီးသောအချက်အချို့မှာ- Keyframes ကို အသံတိတ်ခြင်း။ အချို့သော အန်နီမေးရှင်းများကို ပျော့ပျောင်းစေသည် သို့မဟုတ် နှေးကွေးသွားစေနိုင်သော်လည်း လှုပ်ရှားမှုကို လျှော့ချရန် တောင်းဆိုသောအခါ လုံးဝပျောက်ကွယ်သွားမည့် အခြားအရာများ ရှိပါသည်။ Pulse ကာတွန်းများသည် နမူနာကောင်းတစ်ခုဖြစ်သည်။ ဤကာတွန်းများကို လျှော့ချထားသော လှုပ်ရှားမှုမုဒ်တွင် မလည်ပတ်စေရန် သေချာစေရန်၊ ၎င်းတို့ကို သင့်လျော်သော မီဒီယာမေးမြန်းမှုတွင် ရိုးရိုးရှင်းရှင်း ခြုံငုံနိုင်ပါသည်။
@media (prefers-reduced-motion-no-preference) { @keyfrmaes kf-pulse { { မှ စကေး- var(--kf-pulse-scale-from, 1); opacity- var(--kf-pulse-opacity-from၊ 1); } သို့ { စကေး- var(--kf-pulse-scale-to, 1); အလင်းပိတ်နိုင်မှု-var(--kf-pulse-opacity-to၊ 1); } } }
၎င်းသည် လျှော့ချရန် စိတ်ကြိုက်-လျှော့ချ-ရွေ့လျားမှုကို သတ်မှတ်ပြီး အသုံးပြုသူများသည် ကာတွန်းပုံကို မမြင်နိုင်ဘဲ ၎င်းတို့၏ နှစ်သက်ရာနှင့် ကိုက်ညီသည့် အတွေ့အကြုံကို ရရှိမည်ဖြစ်ကြောင်း သေချာစေပါသည်။ ချက်ချင်းဝင်ပါ။ ဝင်ပေါက် ကာတွန်းပုံများကဲ့သို့ ကျွန်ုပ်တို့ ရိုးရှင်းစွာ မဖယ်ရှားနိုင်သော အချို့သောကီးဘောင်များ ရှိပါသည်။ တန်ဖိုးသည် ပြောင်းလဲရမည်၊ လှုပ်ရှားရမည်၊ မဟုတ်ပါက၊ ဒြပ်စင်တွင် မှန်ကန်သောတန်ဖိုးများ ရှိမည်မဟုတ်ပါ။ သို့သော် ရွေ့လျားမှု လျော့ကျသွားသောအခါ၊ ဤအကူးအပြောင်းသည် ကနဦးတန်ဖိုးမှ ချက်ချင်းဖြစ်သင့်သည်။ ၎င်းကိုအောင်မြင်ရန်၊ တန်ဖိုးသည် အဆုံးအခြေအနေသို့ ချက်ချင်းခုန်တက်သည့် သော့ဖရိမ်အပိုအစုတစ်ခုကို သတ်မှတ်ပါမည်။ ၎င်းတို့သည် ကျွန်ုပ်တို့၏ မူလကီးဘောင်များ ဖြစ်လာသည်။ ထို့နောက်၊ ကျွန်ုပ်တို့သည် ယခင်နမူနာတွင်ကဲ့သို့ အနှစ်သက်ဆုံး-လျှော့ချ-ရွှေ့လျားမှုကို ဦးစားပေးအဖြစ် သတ်မှတ်ထားခြင်းအတွက် မီဒီယာမေးမြန်းမှုတစ်ခုအတွင်း ပုံမှန်ကီးဘောင်များကို ပေါင်းထည့်ပါမည်။ /* လှုပ်ရှားမှုကို လျှော့ချရန်အတွက် ချက်ချင်းဝင်ပါ*/ @keyframes kf-zoom { မှ { အတိုင်းအတာ- var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion-no-preference) { /* မူရင်း zoom ကီးဘောင်များ */ @keyframes kf-zoom { { မှ အတိုင်းအတာ- var(--kf-zoom-from၊ 0.8); } သို့ { အတိုင်းအတာ- var(--kf-zoom-to, 1); } } }
ဤနည်းအားဖြင့်၊ လျှော့ချထားသောရွေ့လျားမှုကို နှစ်သက်သောအသုံးပြုသူများသည် ၎င်း၏နောက်ဆုံးအခြေအနေတွင် အစိတ်အပိုင်းကိုချက်ချင်းမြင်ရမည်ဖြစ်ပြီး အခြားသူများအားလုံးသည် ကာတွန်းအကူးအပြောင်းကို ရရှိကြမည်ဖြစ်သည်။ ပျော့ပျောင်းသောချဉ်းကပ်မှု ကျွန်ုပ်တို့သည် အချို့သော လှုပ်ရှားမှုများကို ထိန်းထားလိုသော်လည်း မူရင်း ကာတွန်းထက် များစွာ ပျော့ပျောင်းပြီး အေးဆေးတည်ငြိမ်သော ကိစ္စများရှိပါသည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့သည် ပျော့ပျောင်းသော အရောင်မှိန်သောအပေါက်ကို အစားထိုးနိုင်သည်။
@keyframes kf-bounce { /* လှုပ်ရှားမှုကို လျှော့ချရန်အတွက် ပျော့ပျောင်းသော အရောင်မှိန်ခြင်း*/ }
@media (prefers-reduced-motion-no-preference) { @keyframes kf-bounce { /* မူရင်း ဘောင်းဘီဘောင်များ */ } }
ယခုတွင်၊ လျှော့ချထားသော ရွေ့လျားမှုကို ဖွင့်ထားသည့် အသုံးပြုသူများသည် အသွင်အပြင်ကို ခံစားနေကြရဆဲဖြစ်သော်လည်း ဘောင်ဝင်ခြင်း သို့မဟုတ် ပျော့ပျောင်းသော လှုပ်ရှားသက်ဝင်မှုမရှိဘဲ အသွင်အပြင်ဖြစ်သည်။ အဆောက်အဦတုံးများကို နေရာချထားခြင်းဖြင့်၊ နောက်မေးခွန်းတစ်ခုမှာ ၎င်းတို့ကို အမှန်တကယ် လုပ်ငန်းလည်ပတ်မှု၏ တစ်စိတ်တစ်ပိုင်းဖြစ်အောင် မည်သို့လုပ်ဆောင်မည်နည်း။ ပြောင်းလွယ်ပြင်လွယ်သော ကီးဘောင်များကို ရေးသားခြင်းသည် တစ်ချက်ဖြစ်သော်လည်း၊ ပရောဂျက်ကြီးတစ်ခုတွင် ၎င်းတို့အား ယုံကြည်စိတ်ချစေရန်အတွက် ခက်ခဲသောနည်းလမ်းကို သင်ယူခဲ့ရသည့် နည်းဗျူဟာအချို့ လိုအပ်ပါသည်။ အကောင်အထည်ဖော်ရေးဗျူဟာများနှင့် အကောင်းဆုံးအလေ့အကျင့်များ ကျွန်ုပ်တို့တွင် သော့ဘောင်တိုကင်များ၏ ခိုင်မာသော စာကြည့်တိုက်တစ်ခုရှိသည်နှင့် တစ်ပြိုင်နက်၊ တကယ့်စိန်ခေါ်မှုမှာ ၎င်းတို့ကို နေ့စဉ်လုပ်ငန်းဆောင်တာအဖြစ် မည်သို့ဆောင်ကြဉ်းမည်နည်း။
သွေးဆောင်မှုမှာ သော့ဘောင်အားလုံးကို တစ်ပြိုင်နက်တည်းချပြီး ပြဿနာဖြေရှင်းကြောင်း ကြေညာရန်ဖြစ်သော်လည်း လက်တွေ့တွင် အကောင်းဆုံးရလဒ်များကို တဖြည်းဖြည်းချင်း မွေးစားခြင်းမှ လာကြောင်း ကျွန်ုပ်တွေ့ရှိခဲ့သည်။ မှိန်ခြင်း သို့မဟုတ် ဆလိုက်ကဲ့သို့သော အသုံးအများဆုံး ကာတွန်းများဖြင့် စတင်ပါ။ ဤအရာများသည် ကြီးကြီးမားမားပြန်လည်ရေးရန်မလိုအပ်ဘဲ ချက်ချင်းတန်ဖိုးကိုပြသသည့် လွယ်ကူသောအနိုင်ရပွဲများဖြစ်သည်။ အမည်ပေးခြင်းသည် အထူးဂရုပြုရမည့်အချက်ဖြစ်သည်။ တသမတ်တည်းရှေ့ဆက် သို့မဟုတ် namespace သည် မည်သည့် ကာတွန်းရုပ်ပုံများ တိုကင်များနှင့် မည်သည့်အရာသည် ဒေသန္တရ တစ်ခုမဟုတ်တစ်ခုဖြစ်ကြောင်း သိသာစေသည်။ ၎င်းသည် မတော်တဆတိုက်မိမှုများကိုလည်း ကာကွယ်ပေးပြီး အဖွဲ့၀င်အသစ်များကို မျှဝေထားသည့်စနစ်ကို တစ်ချက်ချင်းမှတ်မိစေရန် ကူညီပေးသည်။ စာရွက်စာတမ်းသည် ကုဒ်ကိုယ်တိုင်ကဲ့သို့ပင် အရေးကြီးပါသည်။ ကီးဘောင်တစ်ခုစီ၏ တိုကင်တစ်ခုစီ၏ အထက်တွင် မှတ်ချက်တိုတိုတစ်ခုပင်လျှင် နောက်ပိုင်းတွင် ခန့်မှန်းရန် နာရီပေါင်းများစွာ သက်သာစေနိုင်သည်။ ဆော့ဖ်ဝဲအင်ဂျင်နီယာတစ်ဦးသည် တိုကင်ဖိုင်ကိုဖွင့်နိုင်သည်၊ ၎င်းတို့လိုအပ်သောအကျိုးသက်ရောက်မှုကို စကင်ဖတ်ကာ ၎င်းတို့၏အစိတ်အပိုင်းထဲသို့ တိုက်ရိုက်ကူးယူအသုံးပြုမှုပုံစံကို ကူးယူနိုင်ရပါမည်။ Flexibility သည် ဤချဉ်းကပ်မှုကို ကြိုးစားရကျိုးနပ်စေသည်။ ဆင်ခြင်တုံတရားရှိသော စိတ်ကြိုက်ဂုဏ်သတ္တိများကို ဖော်ထုတ်ခြင်းဖြင့်၊ ကျွန်ုပ်တို့သည် စနစ်မပျက်စီးဘဲ ကာတွန်းကို လိုက်လျောညီထွေဖြစ်အောင် အဖွဲ့များကို နေရာလွတ်ပေးပါသည်။ တစ်ချိန်တည်းမှာပင်၊ မရှုပ်ထွေးအောင်ကြိုးစားပါ။ အရေးပါသော အဖုများကို ပေး၍ ကျန်အရာများကို သဘောထား ပေးသည်။ နောက်ဆုံးအနေနဲ့ သုံးစွဲနိုင်မှုကို သတိရပါ။ ကာတွန်းတစ်ခုစီတိုင်းသည် ရွေ့လျားမှုလျှော့ချရန် အခြားရွေးချယ်စရာမလိုအပ်သော်လည်း အများအပြားက ပြုလုပ်ကြသည်။ ဤပြုပြင်ပြောင်းလဲမှုများကို စောစီးစွာပြုလုပ်ခြင်းဆိုသည်မှာ ၎င်းတို့ကို နောက်မှပြန်လည်ပြင်ဆင်ရန် ဘယ်သောအခါမှ မလိုအပ်ဘဲ၊ ၎င်းသည် ကျွန်ုပ်တို့၏အသုံးပြုသူများသည် ၎င်းကိုဖော်ပြထားခြင်းမရှိလျှင်ပင် ကျွန်ုပ်တို့၏အသုံးပြုသူများသတိပြုမိရမည့်အဆင့်ကိုပြသသည်။
ကျွန်ုပ်၏ အတွေ့အကြုံအရ၊ ကျွန်ုပ်တို့၏ ဒီဇိုင်းတိုကင်များ အလုပ်အသွားအလာ၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် keyframes တိုကင်များကို ကုသခြင်းသည် ၎င်းတို့ကို စွဲမြဲစေပါသည်။ ၎င်းတို့ရောက်ရှိပြီးသည်နှင့်၊ ၎င်းတို့သည် အထူးပြုလုပ်ချက်များကဲ့သို့ ခံစားရခြင်းကို ရပ်တန့်ကာ ထုတ်ကုန်၏ရွေ့လျားမှုနှင့် တုံ့ပြန်မှု၏ သဘာဝအတိုင်း တိုးချဲ့မှုတစ်ခုဖြစ်သည့် ဒီဇိုင်းဘာသာစကား၏ တစ်စိတ်တစ်ပိုင်းဖြစ်လာသည်။ အကျဉ်းချုပ် အန်နီမေးရှင်းများသည် ဆောက်လုပ်ရေးအင်တာဖေ့စ်များ၏ ပျော်ရွှင်စရာအကောင်းဆုံးအစိတ်အပိုင်းများထဲမှတစ်ခုဖြစ်နိုင်သော်လည်း တည်ဆောက်ပုံမပါဘဲ၊ ၎င်းတို့သည် စိတ်ပျက်စရာအကောင်းဆုံးအရင်းအမြစ်များထဲမှတစ်ခုဖြစ်လာနိုင်သည်။ ကီးဘောင်များကို တိုကင်များအဖြစ် ဆက်ဆံခြင်းဖြင့်၊ သင်သည် များသောအားဖြင့် ရှုပ်ထွေးပြီး စီမံခန့်ခွဲရခက်သည့် အရာတစ်ခုကို ယူကာ ရှင်းလင်းပြီး ခန့်မှန်းနိုင်သော စနစ်တစ်ခုအဖြစ် ပြောင်းလဲသွားပါသည်။ စစ်မှန်သောတန်ဖိုးသည် ကုဒ်စာကြောင်းအနည်းငယ်ကို သိမ်းဆည်းရုံတင်မဟုတ်ပေ။ သင် fade၊ slide၊ zoom သို့မဟုတ် spin ကိုအသုံးပြုသောအခါ၊ ပရောဂျက်တစ်လျှောက်တွင် ၎င်းသည်မည်သို့ပြုမူမည်ကို သင်အတိအကျသိကြောင်း ယုံကြည်စိတ်ချမှုရှိပါသည်။ ၎င်းသည် အဆုံးမရှိသော ကွဲလွဲမှုများမရှိဘဲ စိတ်ကြိုက်ဂုဏ်သတ္တိများမှ ဆင်းသက်လာသော ပြောင်းလွယ်ပြင်လွယ်ဖြစ်သည်။ ၎င်းသည် ထည့်သွင်းထားသည့်အတိုင်းမဟုတ်ဘဲ အခြေခံအုတ်မြစ်တွင် တည်ဆောက်ထားသည့် သုံးစွဲနိုင်မှုတွင် ပါဝင်သည်။ရူပါ ။ ဤအကြံဉာဏ်များသည် မတူညီသောအဖွဲ့များနှင့် မတူညီသောကုဒ်ဘေ့စ်များတွင် အလုပ်လုပ်သည်ကို ကျွန်ုပ်တွေ့မြင်ခဲ့ရပြီး ပုံစံသည် အမြဲတမ်းတူညီပါသည်။ တိုကင်များ နေရာချထားပြီးသည်နှင့်၊ ကီးဘောင်များသည် ပြန့်ကျဲနေသော လှည့်ကွက်များစုစည်းမှုအဖြစ် ရပ်သွားကာ ဒီဇိုင်းဘာသာစကား၏ တစ်စိတ်တစ်ပိုင်းဖြစ်လာသည်။ ၎င်းတို့သည် ထုတ်ကုန်ကို ပိုမိုရည်ရွယ်ချက်ရှိရှိ၊ ပိုမိုသဟဇာတဖြစ်စေကာ ပိုမိုအသက်ဝင်စေပါသည်။ ဤဆောင်းပါးမှ တစ်ခုခုကို ယူပါက ဤအတိုင်းဖြစ်ပါစေ- ကာတွန်းရုပ်များသည် အရောင်များ၊ စာစီစာရိုက်နှင့် အကွာအဝေးတို့ကို ကျွန်ုပ်တို့ပေးထားပြီးဖြစ်သည့် တူညီသောစောင့်ရှောက်မှုနှင့် ဖွဲ့စည်းပုံနှင့် ထိုက်တန်ပါသည်။ သင့်အင်တာဖေ့စ်ရွှေ့သည့်အခါတိုင်း keyframes တိုကင်များတွင် သေးငယ်သောရင်းနှီးမြှုပ်နှံမှုသည် ပေးချေသည်။
