Kam ir nepieciešami animācijas galvenie kadri (keyframes) un kā tie darbojas?

CSS-ā galvenie kadri (keyframes) tiek izmantoti, lai noteiktu starpposma stāvokļus animācijā. Tie ļauj noteikt, kā elementa īpašības mainīsies dažādos laika punktos animācijas gaitā.

Darbojas šādi: jūs aprakstāt stilu kopumu noteiktiem procentiem no laika (piemēram, 0%, 50%, 100%), un pārlūkprogramma gludi interpolē vērtības starp šiem stāvokļiem.

Piemērs:

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

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

Šajā piemērā elements pakāpeniski parādās (caurspīdīgums mainās no 0 līdz 1) 2 sekundēs.

Tādējādi keyframes ļauj izveidot sarežģītas un gludas animācijas, noteicot galvenās punktu vietas stila izmaiņām.