Na čo slúžia animačné kľúčové snímky (keyframes) a ako fungujú?

Kľúčové snímky (keyframes) v CSS sa používajú na definovanie medziľahlých stavov animácie. Umožňujú určiť, ako sa vlastnosti prvku budú meniť v rôznych časových bodoch počas animácie.

Fungujú takto: popíšete súbor štýlov pre určité percentá času (napríklad 0 %, 50 %, 100 %), a prehliadač plynule interpoluje hodnoty medzi týmito stavmi.

Príklad:

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

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

V tomto príklade sa prvok plynulo objaví (priehľadnosť sa mení od 0 do 1) za 2 sekundy.

Týmto spôsobom umožňujú keyframes vytvárať zložité a plynulé animácie, stanovujúc kľúčové body zmeny štýlov.