Animace v CSS

CSS3 Animace přináší vcelku jednoduché řešení, jak oživit váš web. Animace jsou obrovský skok kupředu. Žádný flash a ani JavaScript. Oproti jQuery a flashi obrovskou výhodu krátkého kódu, což se projeví na rychlosti načítání a rychlosti zobrazení v prohlížeči.

vladce tyran | | css

Animaci defineujeme klíčovým slovem @keyframes nazev-animace { … } a danému stylu jí přiřazujeme vlastností animation-name, přičemž hodnotou je název samotné animace podle toho jak si jí sami nazvete :-).

To jak dlouho bude animace trvat určuje vlastnost animation-duration, hodnoty zadáváme v sekundách nebo milisekundách. V našem případě se animace jmenuje chameleon a trvá 4 sekundy.

.ctverec {
width: 100px;
height: 100px;
animation-name: chameleon;
animation-duration: 4s;
}

@keyframes chameleon {
from { background: red; }
to { background: blue; }
}

 

Jak už z názvu poznáte klíčové slovo from určuje z jakých hodnot na jaké to se náš objekt bude animovat. Během 4 sekund se náš čtverec bude měnit z červené na modrou a poté se zpět vrátí na svoje výchozí nastavení - tj. na černou barvu.

 

Nastavení v posledním kroku

To zda se zachová nastavení v posledním kroku animaci nebo se použije výchozí, řídí vlastnost: animation-fill-mode ta má následující hodnoty:

  • none - nastavení se vrátí do výchozího stavu
  • backwards - pokud je nastaveno delay, animace bude ve stavu prvního kroku animování
  • forwards - zachová se nastavení z posledního kroku animace
  • both - nastaví se obě hodnoty fowrard a backward

 

Jak vydíte na ukázce, po skončení animace se zachová modrá barva a 50px odsazení.

 

Animace se provede až po 3 sekundách, ale už od začátku je náš čtverec odsazený 50px z leva a má červenou barvu. Poté se vrátí do svého výchozího nastavení.

 

A nakonec both, čtverec je na začátku červený odsazený 50px z leva a po skončení animace zůstane modrý a odsazený 100px vleva.

 

Krokování

Animaci můžete krokovat i procenty neo kombinováním klíčových slov a procent, např.

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

/* nebo */
@keyframes chameleon {
from { background: red; }
50% { background: blue; }
100% { background: yellow; }
} 

 

Na začátku bude mít čtverec červenou barvu a bude se posunovat 50px doprava, postupně bude přecházet do modré a přesně v polovině (tj. ve dvou sekundách) bude mít modrou a bude odsazený 50px z leva, poté bude přecházet zpět na svojí původní pozici se změnou barvy do žluta.

 

Časová křivka

Rychlost časové změny řídí vlastnost animation-timing-function

Hodnoty jsou:

  • linear – stejná rychlost
  • ease – ze začátku jde rychle, v samém konci zpomaluje; výchozí hodnota
  • ease-in – postupně zrychluje
  • ease-out – na začátku jde rychle a postupně zpomaluje
  • ease-in-out – na začátku zrychluje a od prostředka zas postupně zpomaluje
  • cubic-bezier(n,n,n,n) – vlastní definice

 

Počet provádění

Kolikrát se animace provede má na starost vlastnost animation-iteration-count, hodnotou je číslo, nebo klíčové slovo infinite díky níž se animace bude provádět pořád dokola.

 

Za jak dlouho animace začne

Zpoždění tj. za jak dlouho se animace začne provádět určuje vlasntost animation-delay, hodnotou je číslo a čas v sekundách nebo milisekundách např.
animation-delay: 2s; - po dvou sekundách se provede animace
animation-delay: 2500ms; - po 2,5 sekundách

 

Pořadí animování

Vlastností animation-direction můžete určit v jakém pořadí se animace bude provádět.

  • normal - tohle je výchozí hodnota. Animace se bude provádět tak jak ste ji definovali
  • reverse - animace se bude provádět pozpátku
  • alternate - animace se provede normálně a při každé druhé se provede obráceně
  • alternate-reverse - nejdříve po zpátku a každou druhou normálně

 

Status

Další vlastnosti jsou:

animation-play-state zda se animace má provádět nebo ne.
Hodnotami jsou:

  • running - výchozí hodnota. Animace se bude provádět
  • paused - animace se pozastaví
  • initial a inherit - výchozí nebo zděděný po rodičích

Tuhle vlastnost zřejmě nejlépe využijete společně s javascriptem, který bude zastavovat nebo spouštět animaci nebo s :hover v CSS.

 

Zkrácená verze pro všechno

Můžete definovat zkrácenou verzi: animation, ta přímá následující po sobě jdoucí hodnoty vlastností:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

První dvě hodnoty jsou poviné, ostatní můžete vynechat, ale nelze přeskakovat pořadí.

 

Knihovny

Na internetu můžete najít hotové knihovny čistě CSS3 animací bez javascriptu, doporučuju si je stáhnout a prozkoumat :-).

mezi ty dobré patří například:
Animate
Magic Animation
Effeckt

 

Velikost fontu

12141618