CSS vlastnost animation

Kromě přechodů transition existují i plnohodnotnější animace v čistém CSS. Podporováno od Internet Exploreru 10. Pro prohlížeče založené na Webkitu je nutnou používat prefix -webkit-.

Klíčové snímky (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 jmeno-animace {
  0%   {background: blue}
  50% {background: yellow}
  100% {background: red}
}

Animace (animation)

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).

Průběh (rychlost v jednotlivých fází) animace lze poměrně detailně nastavovat (Ukázka).

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}

Vyvolání animace

Animace může být spuštěna třemi způsoby:

1. ihned po načtení stránky — pokud by se výše uvedená animace přiřadila např. pro <h1>, po načtení nadpisy změní své pozadí,
2. přes CSS pomocí selektorů uživatelské akce (:hover, :focus apod.),
3. přidáním třídy JavaScriptem — animace se přiřadí speciální .třídě, kterou při nějaké akci nastaví JS.

Test animace

Prostor pro vyzkoušení (nefunguje ve starších Explorerech než 10).

• Délka animace:
• Zpoždění animace:
• Opakování animace: 1 nekonečné
• Směr animace: normální obrácený tam a zpátky tam a zpátky obrácený
• Při začátku/skončení animace: nic zůstane poslední nastaví první nastaví první + zůstane poslední
• Přehrávat/zastavit animaci: běží zastaveno

Spustit animaci

Odkazy a zajímavé animace

• Odpočítávání (vlákno na DJPW)
• CSSNTH
• Improve the payment experience with animations
• Bounce.js: Generátor CSS animací

Knihovny animací:

• Hover.css v2
• Effeckt.css
• animate.css