CSS ကာတွန်း ပိုင်ဆိုင်မှု
ဥပမာ
အတိုကောက် ပိုင်ဆိုင်မှုကို အသုံးပြု၍ ကာတွန်းရုပ်ပုံတစ်ပုံကို <div> ဒြပ်စင်တစ်ခုသို့ ချိတ်ဆက်ခြင်း-
div
{
animation: mymove 5s infinite;
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှုသည် အောက်ပါ animation
တို့အတွက် အတိုကောက်ပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည်။
- ကာတွန်းအမည်
- ကာတွန်း-ကြာချိန်
- ကာတွန်း-အချိန်-လုပ်ဆောင်ချက်
- ကာတွန်း-နှောင့်နှေး
- animation-iteration-count
- ကာတွန်း-ဦးတည်ချက်
- ကာတွန်း-ဖြည့်စွက်မုဒ်
- ကာတွန်း-ကစား-အခြေအနေ
မှတ်ချက် ။ _ _
မူလတန်ဖိုး: | none 0 လွယ်ကူသော 0 1 normal none ဖြင့်လုပ်ဆောင်ခြင်း။ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.animation="mymove 5s အဆုံးမရှိ" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit-၊ -moz- သို့မဟုတ် -o- ဖြင့်လိုက်သောနံပါတ်များသည် ရှေ့ဆက်တွဲတစ်ခုနှင့်အလုပ်လုပ်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
animation | 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
animation: name duration timing-function delay iteration-count
direction fill-mode play-state;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Animations
HTML DOM ရည်ညွှန်း- ကာတွန်း ပိုင်ဆိုင်မှု