ဂုဏ်သတ္တိ animation

ဂုဏ်သတ္တိ animation သည် animation အတွက် အတိုကောက်ဂုဏ်သတ္တိ ဖြစ်ပြီး၊ animation အတွက် ဂုဏ်သတ္တိအားလုံးကို တစ်ပြိုင်နက် သတ်မှတ်ရန် ခွင့်ပြုပေးသည်- animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

တန်ဖိုးများ၏ အစီအစဥ်သည် အရေးမကြီးပါ၊ animation ၏ အချိန်ကြာချိန် animation-duration သည် အချိန်ဆွဲချက် animation-delay ၏ ရှေ့တွင် အမြဲရပ်တည်ရမည်။ မဖြစ်မနေလိုအပ်သော ဂုဏ်သတ္တိများမှာ animation-name နှင့် animation-duration တို့သာဖြစ်သည်။

ဂုဏ်သတ္တိသည် none တန်ဖိုးကိုလည်း လက်ခံနိုင်သည်၊ ထိုတန်ဖိုးသည် animation ကို လုံးဝ ပိတ်ပင်လိုက်သည်။ ဤတန်ဖိုးသည် ပုံသေတန်ဖိုး (default value) ဖြစ်သည်။

ဖွဲ့စည်းပုံ

selector {
	animation: တန်ဖိုးများ;
}

ဥပမာ

ဤဥပမာတွင်၊ animation မစမီ (အသစ်စက်စက် ဖွင့်တိုင်း) 3 စက္ကန့် အချိန်ဆွဲချက် ရှိမည်ဖြစ်ပြီး၊ ထို့နောက် animation ကို 6 စက္ကန့် ကြာအောင် ဖွင့်ပြမည်-

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

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

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ဥပမာ . ဖြစ်နိုင်ခြေရှိသော ပြဿနာများ

အတိုကောက်ပုံစံဖြင့် ရေးထားသော animation သည် ၎င်း၏ အမည်ကြောင့် အလုပ်မလုပ်နိုင်ပါ။ အောက်ပါ animation ကို ကြည့်ကြပါစို့-

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

သတိပြုပါ၊ ကျွန်ုပ်သည် animation အမည်အဖြစ် reverse ကို အသုံးပြုနေပါသည်။ ပထမတစ်ချက် ကြည့်လျှင်၊ အားလုံး ကောင်းနေသလိုပင်၊ သို့သော် animation အလုပ်မလုပ်ပါ၊ အဘယ်ကြောင့်ဆိုသော် reverse သည် ဂုဏ်သတ္တိ animation-direction အတွက် တရားဝင် သော့ချက်စကားလုံး (keyword) တစ်ခု ဖြစ်နေသောကြောင့်ဖြစ်သည်။

ထို့အပြင်၊ အတိုကောက်ပုံစံတွင် အခြားသော သော့ချက်စကားလုံးများကို အမည်အဖြစ် အသုံးပြုသောအခါတွင်လည်း animation အလုပ်မလုပ်ပါ။ သို့သော်၊ "ပြည့်စုံသော" ပုံစံဖြင့် ဖော်ပြသောအခါတွင်မူ အားလုံး ကောင်းစွာ အလုပ်လုပ်ပါသည်။

animation-direction ၏ သော့ချက်စကားလုံး-တန်ဖိုးများနှင့် အတူ animation များကို ပျက်စေသော သော့ချက်စကားလုံးများတွင် ချောမွေ့စေသော လုပ်ဆောင်ချက်များနှင့် သက်ဆိုင်သော သော့ချက်စကားလုံးများအပြင်၊ infinite၊ alternate၊ running၊ paused နှင့် အခြားသော စကားလုံးများလည်း ပါဝင်သည်။

ဤအရာကိုလည်း ကြည့်ပါ

အမိန့် @keyframes၊
animation ၏ အဓိက ဖရိမ်များကို သတ်မှတ်ပေးသည်
ချောမွေ့သော အကူးအပြောင်းများ transition၊ element အပေါ်သို့ နှိပ်ကွက်လိုက်သောအခါ ဖြစ်ပေါ်သော animation ကို ကိုယ်စားပြုသည်