Kokia yra animacijos raktinių kadrų (keyframes) paskirtis ir kaip jie veikia?

CSS pagrindiniai rėmeliai (keyframes) naudojami apibrėžti tarpinę animacijos būseną. Jie leidžia nustatyti, kaip elemento savybės keisis skirtingais animacijos laikotarpiais.

Veikia taip: aprašote stilių rinkinį tam tikriems procentams laiko (pavyzdžiui, 0%, 50%, 100%), ir naršyklė sklandžiai interpoliuoja reikšmes tarp šių būsenų.

Pavyzdys:

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

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

Šiame pavyzdyje elementas palaipsniui atsiranda (permatomumas keičiasi nuo 0 iki 1) per 2 sekundes.

Taip, keyframes leidžia kurti sudėtingas ir sklandžias animacijas, nustatant pagrindines taškų vietas stiliaus pokyčiams.