animation-iteration-count ဂုဏ်သတ္တိ

animation-iteration-count ဂုဏ်သတ္တိသည် အန်နီမေးရှင်းအကြိမ်ရေထပ်ခါတလဲလဲအရေအတွက်ကို သတ်မှတ်ပေးသည်။ ပုံသေအားဖြင့် အန်နီမေးရှင်းသည် 1 ကြိမ်သာ ထပ်ခါတလဲလဲဖြစ်ပြီး ထို့နောက် မူလအနေအထားသို့ ပြန်သွားမည်ဖြစ်သည်။ ကျွန်ုပ်တို့၏ဂုဏ်သတ္တိသည် အကြိမ်ရေအတိအကျသတ်မှတ်ရန် သို့မဟုတ် အဆုံးမရှိသောထပ်ခါတလဲလဲကိုပင် သတ်မှတ်ခွင့်ပြုပေးသည်။

ဝါကျဖွဲ့ထုံး

ရွေးချယ်သူ {
	animation-iteration-count: ကိန်းပြည့် သို့မဟုတ် ကိန်းရှင် | infinite;
}

တန်ဖိုးများ

တန်ဖိုး ဖော်ပြချက်

ကိန်း သတ်မှတ်ထားသောအကြိမ်ရေ၊ ၎င်းပြီးဆုံးသွားပါက အန်နီမေးရှင်းရပ်တန့်သွားမည်။ အန်နီမေးရှင်းရပ်သွားပြီးနောက် ၎င်း၏နေရာကို animation-fill-mode ဂုဏ်သတ္တိဖြင့် ထိန်းချုပ်သည်။ ကိန်းရှင်တန်ဖိုးများလည်း သတ်မှတ်နိုင်သည် - ဤအခြေအနေတွင် အန်နီမေးရှင်းသည် တစ်စိတ်တစ်ပိုင်းသာ ဖွင့်ပြမည်ဖြစ်သည်။

infinite အန်နီမေးရှင်းသည် အဆုံးမရှိ ထပ်ခါထပ်ခါဖြစ်နေမည်။

တန်ဖိုး	ဖော်ပြချက်
ကိန်း	သတ်မှတ်ထားသောအကြိမ်ရေ၊ ၎င်းပြီးဆုံးသွားပါက အန်နီမေးရှင်းရပ်တန့်သွားမည်။ အန်နီမေးရှင်းရပ်သွားပြီးနောက် ၎င်း၏နေရာကို `animation-fill-mode` ဂုဏ်သတ္တိဖြင့် ထိန်းချုပ်သည်။ ကိန်းရှင်တန်ဖိုးများလည်း သတ်မှတ်နိုင်သည် - ဤအခြေအနေတွင် အန်နီမေးရှင်းသည် တစ်စိတ်တစ်ပိုင်းသာ ဖွင့်ပြမည်ဖြစ်သည်။
`infinite`	အန်နီမေးရှင်းသည် အဆုံးမရှိ ထပ်ခါထပ်ခါဖြစ်နေမည်။

ပုံသေတန်ဖိုး: 1.

နမူနာ . အဆုံးသတ်သည့်အကြိမ်ရေ

ဤနမူနာတွင် အန်နီမေးရှင်းသည် 3 ကြိမ်သာ ထပ်ခါတလဲလဲဖြစ်ပြီး ထို့နောက် မူလအနေအထားသို့ ပြန်သွားမည်ဖြစ်သည်။

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 3;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

နမူနာ . infinite တန်ဖိုး

ယခုတစ်ကြိမ်တွင်မူ အန်နီမေးရှင်းသည် အဆုံးမရှိထပ်ခါထပ်ခါဖြစ်နေမည်။

<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-duration ဂုဏ်သတ္တိ,
အန်နီမေးရှင်း၏ကြာချိန်ကို သတ်မှတ်ပေးသည်
animation-delay ဂုဏ်သတ္တိ,
အန်နီမေးရှင်းစတင်မည့် အချိန်နှောင့်အယှက်ကို သတ်မှတ်ပေးသည်
animation-timing-function ဂုဏ်သတ္တိ,
အန်နီမေးရှင်းဖွင့်ပြမှု၏အရှိန်ကို သတ်မှတ်ပေးသည်
animation-direction ဂုဏ်သတ္တိ,
အန်နီမေးရှင်း၏ဦးတည်ရာကို သတ်မှတ်ပေးသည်
animation-fill-mode ဂုဏ်သတ္တိ,
အန်နီမေးရှင်း၏အနေအထားကို သတ်မှတ်ပေးသည်
animation-play-state ဂုဏ်သတ္တိ,
အန်နီမေးရှင်းကို ခေတ္တရပ်တန့်ထားခွင့်ပြုသည်
animation ဂုဏ်သတ္တိ,
အန်နီမေးရှင်းများအတွက် အတိုကောက်ဖော်ပြချက်ဖြစ်သည်
@keyframes command,
အန်နီမေးရှင်း၏အဓိကသော့ချက်များကို သတ်မှတ်ပေးသည်
transition အသွားအလာများ, အစိတ်အပိုင်းတစ်ခုပေါ်သို့ Mouse ရွှေ့သွားခြင်းကြောင့်ဖြစ်ပေါ်သော အန်နီမေးရှင်းဖြစ်သည်