animation-direction ဂုဏ်သတ္တိ

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

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

ထို့အပြင် ဤကဲ့သို့ အပြုအမူကိုလည်း သတ်မှတ်နိုင်သည်- animation သည် အဆုံးစွန်သို့ ရောက်သွားပြီး နဂိုအတိုင်း ပြန်လာမည် (transition တွင်ကဲ့သို့)။ အောက်ပါ ဖော်ပြချက်ကို ကြည့်ပါ။

ဝါကျဖွဲ့ပုံ

cssselector {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

တန်ဖိုးများ

ပုံသေတန်ဖိုး - normal။

ဥပမာ

ယခု element သည် တစ်ဖက်သို့ ရွေ့လျားသွားပြီး၊ ထို့နောက် နဂိုအတိုင်း ပြန်လာမည်၊ အဘယ့်ကြောင့်ဆိုသော် alternate တန်ဖိုးကို သတ်မှတ်ထားသောကြောင့် ဖြစ်သည်။ ဤသို့ဖြစ်ရာတွင် animation-duration သည် 3 စက္ကန့် တန်ဖိုးရှိသည်၊ ဆိုလိုသည်မှာ "ဟိုဘက်သို့" နှင့် "ပြန်လာ" ရွေ့လျားမှုများသည် 3 စက္ကန့် ကြာမြင့်မည် ဖြစ်သည်-

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

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

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

Результат:

ဥပမာ

ယခု element သည် ပြောင်းပြန်ဦးတည်ချက်ဖြင့် ရွေ့လျားမည် (ဘယ်မှ ညာသို့ ရွေ့ရမည့်အစား၊ ညာမှ ဘယ်သို့ ရွေ့လျားမည်)-

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

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}
      
#elem {
  animation-direction: reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

ဥပမာ

ယခု element သည် ဟိုဘက်သို့ ပြန်လာရွေ့လျားမည်၊ သို့သော် ပြောင်းပြန်ဦးတည်ချက်ဖြင့် ဖြစ်သည် (ဘယ်ဘက်မှ စတင်ရမည့်အစား၊ ညာဘက်မှ စတင်မည်)-

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

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

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

Результат:

ထပ်မံကြည့်ရှုရန်