CSS Animations

State နှစ်ခုကြား transition ထက်ပိုသောtimeline လိုသည့်အခါ @keyframes သုံးပါ။ Motion ကိုရည်ရွယ်ချက်ရှိစေပြီး animation မရှိလည်း final state ကိုအသုံးပြုနိုင်ရပါမယ်။

ပိုပြီးနားလည်ထားရမယ့် အချက်

CSS animations က`@keyframes` အတွင်းintermediate states သတ်မှတ်ပြီး duration, timing, delay, iteration, direction နဲ့fill mode ဖြင့်timeline ကိုထိန်းပါတယ်။ Motion သည်feedback သို့relationship ကိုရှင်းစေရမည်ဖြစ်ပြီး essential content ကိုanimation ပြီးမှသာမြင်ရအောင်မလုပ်ဘဲ `prefers-reduced-motion` fallback ထည့်ပါ။

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

Loading indicator သို့notification entrance ကိုtransform/opacity ဖြင့်animate လုပ်ပြီး reduced-motion တွင်static state ချက်ချင်းပြပါ။

ဒီသင်ခန်းစာပြီးရင်

• CSS Animations ကိုကိုယ်ပိုင်စကားဖြင့်ရှင်းပြနိုင်ခြင်း
• Winning rule နဲ့computed value ကိုDevTools မှရှာနိုင်ခြင်း
• Long content, narrow width နဲ့keyboard state ကိုစမ်းနိုင်ခြင်း

.notice {
  animation: notice-in 240ms ease-out both;
}

@keyframes notice-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice { animation: none; }
}

Notice သည်ညင်သာစွာဝင်လာပြီး reduced-motion user များအတွက် animation မပါဘဲချက်ချင်းမြင်ရမည်။

CSS reference — MDN Web Docs