Na co jsou klíčové snímky a jak fungují?

@keyframes — pravidlo CSS, které definuje klíčové snímky animace. Umožňuje vytvořit sekvenci stavů prvku v různých časech, které prohlížeč plynule interpoluje, čímž vytváří efekt pohybu. Funguje tím, že definuje sadu stylů pro prvek v určitých procentech času (od 0 % do 100 %) nebo pomocí klíčových slov from (0 %) a to (100 %).

Pro použití keyframes je třeba:

1. Definovat pravidlo @keyframes s unikátním názvem.
2. Uvnitř @keyframes specifikovat styly pro různé časové body (v procentech nebo from/to).
3. Použít vytvořenou animaci na prvek pomocí vlastnosti CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Počáteční stav: žádné posunutí v ose X
  }

  to {
    transform: translateX(100%); // Konečný stav: posunutí o 100 % v ose X
  }
}

.element {
  animation-name: slidein; // Název animace definovaný výše
  animation-duration: 3s; // Délka trvání animace
  animation-timing-function: ease-in-out; // Funkce rychlosti animace
  animation-delay: 1s; // Zpoždění před začátkem animace
  animation-iteration-count: infinite; // Počet opakování (zde nekonečné)
  animation-direction: alternate; // Směr animace (přímý, pak opačný)
}

Hlavní vlastnosti animation, používané společně s @keyframes:

Vlastnost	Popis
animation-name	Název @keyframes, který má být použit.
animation-duration	Délka jednoho cyklu animace (například 2s, 500ms).
animation-timing-function	Funkce rychlosti animace (například linear, ease, ease-in, cubic-bezier).
animation-delay	Zpoždění před začátkem animace (například 1s).
animation-iteration-count	Počet opakování animace (infinite pro nekonečné opakování).
animation-direction	Směr animace (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Určuje, jaké styly se použijí na prvek před a po animaci.
animation-play-state	Určuje, zda je animace spuštěná nebo pozastavená.