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	Анимация иштеп жатабы же токтотулдубубу.