Açar kadrlar nə üçündür və necə işləyirlər?

@keyframes — CSS qaydası, bu animasiyanın əsas kadrlarını müəyyən edir. Bu, elementin müxtəlif vaxtlarda vəziyyətlərinin ardıcıllığını yaratmağa imkan verir və brauzer onları yumşaq şəkildə interpolasiya edərək hərəkət effektini yaradır. Bu, element üçün müəyyən faizlərdə (0%-dən 100%-ə qədər) və ya from (0%) və to (100%) açar sözlərindən istifadə etməklə stil dəstlərini təyin etməklə işləyir.

keyframes istifadə etmək üçün:

1. Unikal ad ilə @keyframes qaydasını təyin edin.
2. @keyframes daxilində, müxtəlif vaxt nöqtələri üçün stilləri göstərin (faizlərdə və ya from/to).
3. Yaradılmış animasiyanı CSS animation xüsusiyyəti ilə elementə tətbiq edin.

@keyframes slidein {
  from {
    transform: translateX(0%); // Başlanğıc vəziyyət: X oxunda hərəkət yoxdur
  }

  to {
    transform: translateX(100%); // Son vəziyyət: X oxunda 100% hərəkət
  }
}

.element {
  animation-name: slidein; // Yuxarıda təyin olunmuş animasiya adı
  animation-duration: 3s; // Animasiya müddəti
  animation-timing-function: ease-in-out; // Animasiya sürət funksiyası
  animation-delay: 1s; // Animasiya başlamadan əvvəl gecikmə
  animation-iteration-count: infinite; // Təkrarlanma sayı (burada sonsuz)
  animation-direction: alternate; // Animasiya istiqaməti (birbaşa, sonra tərs)
}

Əsas animation xüsusiyyətləri, @keyframes ilə birlikdə istifadə olunur:

Xüsusiyyət	Təsviri
animation-name	Tətbiq olunacaq @keyframes adı.
animation-duration	Bir animasiya dövrünün müddəti (məsələn, 2s, 500ms).
animation-timing-function	Animasiya sürət funksiyası (məsələn, linear, ease, ease-in, cubic-bezier).
animation-delay	Animasiya başlamadan əvvəl gecikmə (məsələn, 1s).
animation-iteration-count	Animasiya təkrarlanma sayı (infinite sonsuz təkrarlama üçün).
animation-direction	Animasiya istiqaməti (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Animasiya əvvəl və sonra hansı stillərin tətbiq olunacağını müəyyən edir.
animation-play-state	Animasiya işləyib-işləmədiyini müəyyən edir (dayandırma və ya davam etdirmə).