Animations (လှုပ်ရှားမှုများ)

Step 1: Keyframes ကြေညာခြင်း

အရင်ဆုံး Animation ဇာတ်ညွှန်း (Keyframes) ရေးရပါတယ်။ နာမည်တစ်ခု ပေးရပါမယ်။

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* အပေါ် ခုန်တက် */
  }
  100% {
    transform: translateY(0); /* ပြန်ကျ */
  }
}

Step 2: Animation ကို ခေါ်သုံးခြင်း

Element မှာ animation property နဲ့ ချိတ်ဆက်ရပါမယ်။

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;

  /* Name, Duration, Timing, Iteration */
  animation: bounce 1s infinite;
}

bounce: Keyframe နာမည်။
1s: တစ်ခါလုပ်ရင် ၁ စက္ကန့် ကြာမယ်။
infinite: အဆုံးမရှိ လုပ်နေမယ် (Loop)။
alternate: (Optional) အသွားအပြန် လုပ်မယ် (ဥပမာ - ကြီးလိုက် သေးလိုက်)။