8.3. Tvoření animací - @keyframes

Animace se složí z jednotlivých klíčových snímků. Jednotlivé kroky mohou být buď znázorněny procenty, nebo v případě, kdy stačí jen dva stavy, lze místo procent použít klíčová slova from a to (ekvivalent 0% a 100%).

@keyframes changeColors {
  0%   {background: blue}
  50% {background: yellow}
  100% {background: red}
}

changeColor je název animace, který si sami zvolíme. Zapisuje se hned po deklaraci @keyframes.

Výše nadefinované klíčové snímky se přiřadí danému elementu, syntaxe je dost podobná vlastnosti transition:

element {
  animation: jmeno-animace 5s linear;
}

Vlastnost animation je zkrácenina všech animation-* vlastností. Název a doba trvání jsou povinné.

• animation-name - Název animace, která se má selektoru přiřadit.
• animation-duration - Délka animace, zadává se v sekundách (např. animation-duration: 1s).
• animation-timing-function - Slouží k ovlivňování průběhu animace, tj. že se třeba ze začátku bude animovat rychle a konec animace bude pomalejší (výchozí hodnota ease). Nebo může být průběh lineární (linear).
• animation-delay - Nastavení zpoždění animace po jejím vyvolání. Čas se zadává rovněž v sekundách.
• animation-iteration-count - Počet opakování dané animace. Výchozí hodnota je 1, jiným číslem lze požadovaný počet opakování, nekonečné přehrávání zajistí klíčové slovo infinite.
• animation-direction - Směr animace, možné hodnoty jsou:
• • normal — výchozí hodnota; animace běží od 0% ke 100%, potom v případě opakování skočí na 0%,
• • reverse — animace běží od 100% k 0%, potom v případě opakování skočí na 100%,
• • alternate — má význam jen u více opakování a při každém změní svůj směr, tj. nejprve poběží z 0% ke 100%, potom se vrátí k 0%, zase poběží ke 100% a tak dále,
• • alternate-reverse — totéž jen se začne od 100%.
• animation-fill-mode - Upřesňuje, zda se mají hodnoty prvního nebo posledního snímku projevovat i při skončení animace.
• • none — výchozí hodnota; před animováním s nic nemění, po skončení animace se vše vrátí k normálu,
• • forwards — po skončení animace zůstane stav posledního snímku,
• • backwards — v případě prodlevy před zahájením animace (animation-delay) se nastaví s předstihem hodnoty prvního snímku,
• • both — kombinace výše uvedeného.
• animation-play-state - Umožňuje zastavení a opětovné spuštění animace.
• • running — výhozí hodnota; animace běží,
• • paused — animace je pozastavena, opětovné spuštění naváže v okamžiku předchozího pozastavení.

Více animací

Jeden element může používat animací více. Mají-li animation-* hodnoty být různé pro každou animaci zvlášť, hodnoty se oddělují čárkou (,).

element {animation: prvni-animace 5s, druha-animace 2s}