Na co slouží animační klíčové snímky (keyframes) a jak fungují?

Klíčové snímky (keyframes) v CSS se používají k definování mezistavů animace. Umožňují určit, jak se vlastnosti prvku budou měnit v různých časech během animace.

Fungují takto: popíšete sadu stylů pro určité procenta času (například 0 %, 50 %, 100 %), a prohlížeč plynule interpoluje hodnoty mezi těmito stavy.

Příklad:

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

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

V tomto příkladu se prvek plynule objeví (průhlednost se mění od 0 do 1) za 2 sekundy.

Tímto způsobem umožňují klíčové snímky vytvářet složité a plynulé animace, stanovující klíčové body změny stylů.