CSS ကာတွန်း-ဖြည့်စွက်မုဒ် ပိုင်ဆိုင်မှု
ဥပမာ
ကာတွန်းရုပ်ရှင်ပြီးဆုံးသောအခါ <div> ဒြပ်စင်အား နောက်ဆုံးသော့ဘောင်ဘောင်မှ စတိုင်တန်ဖိုးများကို ထိန်းသိမ်းထားခွင့်ပြုပါ-
div {
animation-fill-mode: forwards;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ကာတွန်းကို မဖွင့်မီ (မစတင်မီ၊ ပြီးဆုံးပြီးနောက်၊ သို့မဟုတ် နှစ်ခုလုံး) တွင် animation-fill-mode
ပိုင်ဆိုင်မှုသည် စတိုင်လ်တစ်ခုကို သတ်မှတ်သည်။
CSS အန်နီမေးရှင်းများသည် ပထမသော့ဘောင်ကို မဖွင့်မီ သို့မဟုတ် နောက်ဆုံးသော့ဘောင်ကို ဖွင့်ပြီးနောက် အစိတ်အပိုင်းအပေါ် သက်ရောက်မှုမရှိပါ။ ပိုင်ဆိုင်မှုသည် ဤ animation-fill-mode
အပြုအမူကို လွှမ်းမိုးနိုင်သည်။
မူလတန်ဖိုး: | မရှိ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.animationFillMode="forwards" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit-၊ -moz- သို့မဟုတ် -o- ဖြင့်လိုက်သောနံပါတ်များသည် ရှေ့ဆက်တွဲတစ်ခုနှင့်အလုပ်လုပ်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
CSS Syntax
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
ကာတွန်းမစတင်မီ <div> ဒြပ်စင်အား ပထမသော့ဘောင်ဖြင့် သတ်မှတ်ထားသော စတိုင်တန်ဖိုးများကို ရရှိစေပါ (ကာတွန်းနှောင့်နှေးမှုကာလအတွင်း--
div {
animation-fill-mode: backwards;
}
ဥပမာ
ကာတွန်းမစတင်မီ <div> ဒြပ်စင်အား ပထမသော့ဘောင်ဖြင့် သတ်မှတ်ထားသော စတိုင်တန်ဖိုးများကို ရရှိစေကာ ကာတွန်းရုပ်ရှင်ပြီးဆုံးသည့်အခါ နောက်ဆုံးသော့ဘောင်မှ စတိုင်တန်ဖိုးများကို ထိန်းသိမ်းပါ-
div {
animation-fill-mode: both;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Animations
HTML DOM ရည်ညွှန်း- animationFillMode ပိုင်ဆိုင်မှု