Kalit ramkalar nima uchun kerak va ular qanday ishlaydi?

@keyframes — CSS qoidasi bo'lib, u animatsiyaning kalit ramkalarini belgilaydi. Bu elementning turli vaqtlaridagi holatlarini ketma-ketlikda yaratishga imkon beradi va brauzer ularni yumshoq tarzda interpolatsiya qilib, harakat effektini yaratadi. Bu, element uchun ma'lum foizlar (0% dan 100% gacha) yoki from (0%) va to (100%) kalit so'zlaridan foydalanib, uslublar to'plamini belgilash orqali ishlaydi.

keyframes dan foydalanish uchun:

1. Unikal nom bilan @keyframes qoidani aniqlang.
2. @keyframes ichida, turli vaqt nuqtalari uchun uslublarni belgilang (foizlarda yoki from/to).
3. Yaratilgan animatsiyani CSS animation xususiyati yordamida elementga qo'llang.

@keyframes slidein {
  from {
    transform: translateX(0%); // Boshlang'ich holat: X bo'yicha harakat yo'q
  }

  to {
    transform: translateX(100%); // Yakuniy holat: X bo'yicha 100% harakat
  }
}

.element {
  animation-name: slidein; // Yuqorida belgilangan animatsiya nomi
  animation-duration: 3s; // Animatsiya davomiyligi
  animation-timing-function: ease-in-out; // Animatsiya tezlik funksiyasi
  animation-delay: 1s; // Animatsiya boshlanishidan oldin kechikish
  animation-iteration-count: infinite; // Takrorlash soni (bu yerda cheksiz)
  animation-direction: alternate; // Animatsiya yo'nalishi (to'g'ri, so'ngra teskari)
}

Asosiy animation xususiyatlari, @keyframes bilan birga ishlatiladigan:

Xususiyat	Tavsifi
animation-name	Qo'llaniladigan @keyframes nomi.
animation-duration	Bir animatsiya siklining davomiyligi (masalan, 2s, 500ms).
animation-timing-function	Animatsiya tezlik funksiyasi (masalan, linear, ease, ease-in, cubic-bezier).
animation-delay	Animatsiya boshlanishidan oldin kechikish (masalan, 1s).
animation-iteration-count	Animatsiya takrorlash soni (infinite cheksiz takrorlash uchun).
animation-direction	Animatsiya yo'nalishi (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Animatsiya oldidan va keyin qanday uslublar qo'llanilishini belgilaydi.
animation-play-state	Animatsiya ishga tushgan yoki to'xtatilgan holatda ekanligini belgilaydi.