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 များအတွက် အတိုကောက် ဖော်ပြချက်ဖြစ်ပါသည်
@keyframes command,
သည် animation ၏ အဓိက ဘောင်များကို သတ်မှတ်ပေးပါသည်
transition ပြေပြစ်သော အကူးအပြောင်းများ, သည် element အပေါ်သို့ ညွှန်ပြခြင်းဖြင့် ဖြစ်ပေါ်သော animation ဖြစ်ပါသည်