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

animation-duration ဂုဏ်သတ္တိသည် animation လုပ်ဆောင်ချက်၏ ကြာချိန်ကို သတ်မှတ်ပေးပါသည်။

ဖွဲ့စည်းပုံ

cssselector {
  animation-duration: s သို့မဟုတ် ms ဖြင့် ကြာချိန်;
}

တန်ဖိုးများ

တန်ဖိုး ဖော်ပြချက်
s စက္ကန့်ဖြင့် ကြာချိန်ကို သတ်မှတ်ပေးပါသည် (ဥပမာ 3s)။
ms မီလီစက္ကန့်ဖြင့် ကြာချိန်ကို သတ်မှတ်ပေးပါသည် (ဥပမာ 3ms)။ တစ်စက္ကန့်သည် 1000 မီလီစက္ကန့်ဖြစ်ပါသည်။

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

ဥပမာ

ဤဥပမာတွင် animation သည် 3 စက္ကန့်ကြာ ဖွင့်ပြမည်ဖြစ်သည်:

html<div id="elem"></div>
css@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 ဖြစ်ပါသည်