Az animációs kulcskockák (keyframes) mire valók és hogyan működnek?

A CSS-ben a kulcskockák (keyframes) az animáció közbenső állapotainak meghatározására szolgálnak. Lehetővé teszik, hogy megadja, hogyan változnak egy elem tulajdonságai az animáció különböző pontjain.

Így működnek: egy stílusok halmazát írja le bizonyos időszázalékokra (például 0%, 50%, 100%), és a böngésző simán interpolálja az értékeket ezek között az állapotok között.

Példa:

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

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

Ebben a példában az elem simán jelenik meg (az átlátszóság 0-ról 1-re változik) 2 másodperc alatt.

Így a keyframes lehetővé teszik összetett és sima animációk létrehozását, meghatározva a stílusváltozások kulcspontjait.