Animasiya açar kadrları (keyframes) nə üçün lazımdır və necə işləyirlər?

CSS-də açar kadrlar (keyframes) animasiyanın ara vəziyyətlərini təyin etmək üçün istifadə olunur. Onlar elementin xüsusiyyətlərinin animasiya boyunca necə dəyişəcəyini göstərməyə imkan verir.

İş prinsipi belədir: müəyyən zaman faizləri üçün stil toplusu təsvir edirsiniz (məsələn, 0%, 50%, 100%), və brauzer bu vəziyyətlər arasında dəyərləri yumşaq interpolasiya edir.

Nümunə:

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

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

Bu nümunədə, element yumuşaq şəkildə görünür (şəffaflıq 0-dan 1-ə dəyişir) və bu 2 saniyə çəkir.

Beləliklə, keyframes mürəkkəb və axıcı animasiyalar yaratmağa imkan verir, stil dəyişikliklərinin əsas nöqtələrini müəyyən edir.