Na čo sú potrebné keyframes a ako fungujú?

@keyframes — pravidlo CSS, ktoré určuje kľúčové snímky animácie. Umožňuje vytvoriť sled stavov prvku v rôznych časových bodoch, ktoré prehliadač plynulo prechádza, čím vytvára efekt pohybu. Funguje prostredníctvom určenia sady štýlov pre prvok v určitých percentách času (od 0% do 100%) alebo pomocou kľúčových slov from (0%) a to (100%).

Na použitie keyframes je potrebné:

1. Definovať pravidlo @keyframes s jedinečným menom.
2. Vo vnútri @keyframes uviesť štýly pre rôzne časové značky (v percentách alebo from/to).
3. Aplikovať vytvorenú animáciu na prvok pomocou vlastnosti CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Počiatočný stav: žiadne posunutie na X
  }

  to {
    transform: translateX(100%); // Konečný stav: posunutie o 100% na X
  }
}

.element {
  animation-name: slidein; // Názov animácie, definovaný vyššie
  animation-duration: 3s; // Dĺžka trvania jednej iterácie animácie
  animation-timing-function: ease-in-out; // Funkcia rýchlosti animácie
  animation-delay: 1s; // oneskorenie pred začatím animácie
  animation-iteration-count: infinite; // Počet opakovaní (tu nekonečne)
  animation-direction: alternate; // Smer animácie (priama, spätná)
}

Hlavné vlastnosti animation, používané spolu s @keyframes:

Vlastnosť	Popis
animation-name	Názov @keyframes, ktorý sa má použiť.
animation-duration	Dĺžka jedného cyklu animácie (napríklad 2s, 500ms).
animation-timing-function	Funkcia rýchlosti animácie (napríklad linear, ease, ease-in, cubic-bezier).
animation-delay	Onesko­renie pred začatím animácie (napríklad 1s).
animation-iteration-count	Počet opakovaní animácie (infinite pre nekonečné opakovanie).
animation-direction	Smer animácie (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Určuje, aké štýly sa použijú na prvku pred a po vykonaní animácie.
animation-play-state	Určuje, či je animácia v priebehu alebo pozastavená.