CSS @keyframes စည်းမျဉ်း
ဥပမာ
အစိတ်အပိုင်းတစ်ခုအား 200px အောက်သို့ တဖြည်းဖြည်းရွှေ့ပါ-
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
စည်း @keyframes
မျဉ်းသည် ကာတွန်းကုဒ်ကို သတ်မှတ်သည်။
CSS စတိုင်များကို အစုံလိုက်မှ နောက်တစ်ခုသို့ တဖြည်းဖြည်း ပြောင်းလဲခြင်းဖြင့် ကာတွန်းကို ဖန်တီးသည်။
ကာတွန်းရိုက်ကူးနေစဉ်အတွင်း၊ သင်သည် CSS ပုံစံများကို အကြိမ်များစွာ ပြောင်းလဲနိုင်သည်။
စတိုင်ပြောင်းလဲမှုသည် မည်သည့်အချိန်တွင်ဖြစ်မည်ကို ရာခိုင်နှုန်းသတ်မှတ်ပါ၊ သို့မဟုတ် 0% နှင့် 100% တူညီသည့် "မှ" နှင့် "သို့" သော့ချက်စာလုံးများဖြင့် သတ်မှတ်ပါ။ 0% သည် animation ၏အစဖြစ်ပြီး 100% သည် animation ပြီးသွားသောအခါဖြစ်သည်။
အကြံပြုချက်- အကောင်းဆုံးဘရောက်ဆာပံ့ပိုးမှုအတွက်၊ သင်သည် 0% နှင့် 100% ရွေးချယ်မှုနှစ်ခုလုံးကို အမြဲသတ်မှတ်သင့်သည်။
မှတ်ချက် ။
မှတ်ချက်- !အရေးကြီးသောစည်းမျဉ်းကို သော့ဘောင်တစ်ခုတွင် လျစ်လျူရှုထားသည် (ဤစာမျက်နှာရှိ နောက်ဆုံးဥပမာကိုကြည့်ပါ)။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် စည်းမျဉ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
-webkit-၊ -moz- သို့မဟုတ် -o- ဖြင့်လိုက်သောနံပါတ်များသည် ရှေ့ဆက်တစ်ခုနှင့်အလုပ်လုပ်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
animationname | Required. Defines the name of the animation. |
keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
css-styles | Required. One or more legal CSS style properties |
နောက်ထပ် ဥပမာများ
ဥပမာ
ကာတွန်းတစ်ခုတွင် ကီးဖရိမ်ရွေးချယ်မှုများစွာကို ထည့်သွင်းပါ-
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
ဥပမာ
ကာတွန်းတစ်ခုတွင် CSS ပုံစံများစွာကို ပြောင်းလဲပါ-
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
ဥပမာ
CSS စတိုင်များစွာပါသော keyframe ရွေးပေးသူများ-
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
ဥပမာ
မှတ်ချက်- !အရေးကြီးသောစည်းမျဉ်းကို သော့ဘောင်တစ်ခုတွင် လျစ်လျူရှုထားသည်-
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Animations