Анимациянын негизги кадрлары (keyframes) эмне үчүн керек жана алар кандай иштейт?

CSS-деги ачкыч кадрлар (keyframes) анимациянын аралык абалдарын аныктоо үчүн колдонулат. Алар элементтин мүнөздөмөлөрү анимациянын ар кандай учурларында кандай өзгөрөөрүн белгилөөгө мүмкүндүк берет.

Ишти мындай жүргүзөсүңүз: белгилүү бир убакыт пайыздары үчүн стильдердин топтомун сүрөттөйсүз (мисалы, 0%, 50%, 100%), жана браузер бул абалдар ортосунда баалуулуктарды жогорулайт.

Мисал:

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

Бул мисалда элемент жайылуу менен көрүнөт (ачыктык 0дон 1ге өзгөрөт) 2 секундда.

Мындайча айтканда, keyframes татаал жана агымдуу анимациялар түзүүгө мүмкүндүк берет, стиль өзгөрүүлөрүнүн негизги чекиттерин белгилөө аркылуу.