animation-duration ဂုဏ်သတ္တိ
animation-duration ဂုဏ်သတ္တိသည်
animation လုပ်ဆောင်ချက်၏ ကြာချိန်ကို သတ်မှတ်ပေးပါသည်။
ဖွဲ့စည်းပုံ
selector {
animation-duration: s သို့မဟုတ် ms ဖြင့် ကြာချိန်;
}
တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
s |
စက္ကန့်ဖြင့် ကြာချိန်ကို သတ်မှတ်ပေးပါသည် (ဥပမာ 3s)။ |
ms |
မီလီစက္ကန့်ဖြင့် ကြာချိန်ကို သတ်မှတ်ပေးပါသည် (ဥပမာ 3ms)။ တစ်စက္ကန့်သည် 1000 မီလီစက္ကန့်ဖြစ်ပါသည်။ |
ပုံသေ တန်ဖိုး: 0s.
ဥပမာ
ဤဥပမာတွင် animation သည်
3 စက္ကန့်ကြာ ဖွင့်ပြမည်ဖြစ်သည်:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
ဆက်လက်လေ့လာရန်
-
animation-nameဂုဏ်သတ္တိ,
သည် animation ၏ အမည်ကို သတ်မှတ်ပေးပါသည် -
animation-delayဂုဏ်သတ္တိ,
သည် animation စတင်မည့် နောက်ကျချိန်ကို သတ်မှတ်ပေးပါသည် -
animation-timing-functionဂုဏ်သတ္တိ,
သည် animation လုပ်ဆောင်မှု၏ အရှိန်နှုန်းကို သတ်မှတ်ပေးပါသည် -
animation-iteration-countဂုဏ်သတ္တိ,
သည် animation ၏ အကြိမ်အရေအတွက်ကို သတ်မှတ်ပေးပါသည် -
animation-directionဂုဏ်သတ္တိ,
သည် animation ၏ ဦးတည်ချက်ကို သတ်မှတ်ပေးပါသည် -
animation-fill-modeဂုဏ်သတ္တိ,
သည် animation ၏ အခြေအနေကို သတ်မှတ်ပေးပါသည် -
animation-play-stateဂုဏ်သတ္တိ,
သည် animation ကို ခေတ္တရပ်နားထားရန် ခွင့်ပြုပေးပါသည် -
animationဂုဏ်သတ္တိ,
သည် animation များအတွက် အတိုကောက် ဖော်ပြချက်ဖြစ်ပါသည် -
@keyframescommand,
သည် animation ၏ အဓိက ဘောင်များကို သတ်မှတ်ပေးပါသည် -
transitionပြေပြစ်သော အကူးအပြောင်းများ, သည် element အပေါ်သို့ ညွှန်ပြခြင်းဖြင့် ဖြစ်ပေါ်သော animation ဖြစ်ပါသည်