Milleks on vajalikud animatsiooni võtmekadrid (keyframes) ja kuidas nad töötavad?

CSS-i põhiväljaanded (keyframes) kasutatakse animatsiooni vahepealsete seisundite määratlemiseks. Need võimaldavad määrata, kuidas elemendi omadused muutuvad erinevatel animatsiooni hetkedel.

Töötavad järgmiselt: kirjeldad komplekti stiile teatud aja protsentidele (näiteks 0%, 50%, 100%), ja brauser interpoleerib sujuvalt väärtused nende seisundite vahel.

Näide:

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

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

Selles näites ilmub element sujuvalt (läbipaistvus muutub 0-st 1-ni) 2 sekundiga.

Seega võimaldavad keyframes luua keerukaid ja sujuvaid animatsioone, määrates põhikohtadest stiilide muutmise.