Keyframes барои чӣ лозиманд ва онҳо чӣ гуна кор мекунанд?

@keyframes — қағида CSS, анықтайтын анимацияның негізгі кадрларын. Ол элементтің әртүрлі уақыт сәттеріндегі жағдайларын тізбектей құруға мүмкіндік береді, браузер оларды бірінен соң бірін тегіс ауыстырып, қозғалыс әсерін жасайды. Бұл процесті уақыттың белгілі бір пайыздарында (0%-ден 100%-ға дейін) немесе from (0%) және to (100%) кілт сөздерін пайдалану арқылы стильдер жиынтығын анықтау арқылы жүзеге асырады.

keyframes қолдану үшін:

1. Бірегей атауы бар @keyframes ережесін анықтау.
2. @keyframes ішіне әртүрлі уақыт белгілері үшін стильдерді көрсету (пайыздарда немесе from/to).
3. Жасалған анимацияны CSS қасиеті animation арқылы элементке қолдану.

@keyframes slidein {
  from {
    transform: translateX(0%); // Бастапқы жағдай: X бойынша ауытқу жоқ
  }

  to {
    transform: translateX(100%); // Соңғы жағдай: X бойынша 100% ауытқу
  }
}

.element {
  animation-name: slidein; // Жоғарыда анықталған анимация атауы
  animation-duration: 3s; // Анимацияның бір циклінің ұзақтығы
  animation-timing-function: ease-in-out; // Анимацияның жылдамдығы функциясы
  animation-delay: 1s; // Анимация басталуы алдында кідіру
  animation-iteration-count: infinite; // Қайталау саны (мұнда шексіз)
  animation-direction: alternate; // Анимация бағыты (тікелей, кері)
}

@keyframes-пен бірге қолданылатын негізгі animation қасиеттері:

Қасиет	Сипаттамасы
animation-name	Қолданылатын @keyframes атауы.
animation-duration	Бір цикл анимациясының ұзақтығы (мысалы, 2s, 500ms).
animation-timing-function	Анимацияның жылдамдығы функциясы (мысалы, linear, ease, ease-in, cubic-bezier).
animation-delay	Анимация басталуы алдында кідіру (мысалы, 1s).
animation-iteration-count	Анимацияның қайталану саны (infinite шексіз қайталану үшін).
animation-direction	Анимация бағыты (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Анимация аяқталғаннан кейін немесе басталар алдында элементке қолданылатын стильдер.
animation-play-state	Анимацияның орындалу немесе тоқтату күйі.