Lehký úvod do CSS animace

Konečně jsem se dostal ke studiu možností animace, která k nám už teď prosakují z CSS3. Tento článek berte jako moje zápisky z učení.

Než začneme, velmi doporučuji nainstalovat vývojářskou verzi WebKitu – je na všechny platformy a některé výsledky jinak neuvidíte.

Transitions aneb přechody

CSS transition nám umožní jednoduché animace změny vlastností HTML elementu. Řekněme, že máme div#transition_test:

#transition_test
{
  background: #FFD362;
  border: 2px solid #D89E10;
  padding: 1em;
  margin: 0 auto 1.5em auto;
  width: 75%;
  
  /* WebKit */
  -webkit-transition-property: background, width;
  -webkit-transition-duration: 0.35s;
  -webkit-transition-timing-function: linear;
    
  /* Opera 10.5+ */
  -o-transition-property: background, width;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: linear;
  
  /* Pro lepsi casy */
  transition-property: background, width;
  transition-duration: 0.5s;
  transition-timing-function: linear;
    
}

transition-property určuje, jakou vlastnost elementu chceme animovat. Já jsem se rozhodl animovat barvu pozadí a šířku. Pozor! Pokud nespecifikujete jaká změna vlastnosti se má animovat, budou se animovat změny všech vlastností. Specifikace transition-property →

transition-duration specifikuje, jak dlouho má přechod trvat. Analogicky jako u -property můžete oddělit čárkou více hodnot, pokud chcete určité vlastnosti animovat různě dlouho. Více o transition-duration →

transition-timing-function definuje, jaká funkce se má použít na průběh animace. K dispozici máme linear, ease-in, ease-out a další nebo můžeme definovat vlastní průběh. Více o transition-timing-function →

Pro tyto tři CSS vlastnosti můžeme použít zkrácený zápis ve tvaru transition: <property> <duration> <timing-function>;

Aktivování přechodu

Animace přechodu se aktivuje kdykoli, když se element dostane do „jiného stavu”, než ve kterém se právě nachází, pakliže je pro nový stav definovaná změna. To zní divoce, ale typické příklady jsou:

  • Pseudo třídy :hover, :focus, :visited apod.
  • Element ztratí/dostane class – třeba přes JavaScript

Takže já si nedefinuju:

#transition_test:hover
{
  background: #FFEDAF;
  width: 50%;
}
#transition_test.transition_test_clicked
{
  background: #E9E9E9;
}

K elementu připojím jednoduchý onclick kód, který mu přidá nebo odebere class .transition_test_clicked.

Výsledkem našich prvních krůčků na poli CSS animace je tento rámeček. Reagovat bude v prohlížečích založených na WebKitu a v Opeře 10.5+. (Aktualizováno 24. 5.: Firefox by měl transition podporovat od verze 3.7)

Transition Test – najeď na mě, klidně i klikni

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Animation aneb klíčová okýnka

Nad CSS animation lze tak trochu uvažovat jako nad sérií definovaných stavů, mezi kterými prohlížeč spočítá přechody. Začneme opět základní definicí pokusného elementu:

#animation_test
{
  background: #EED3B6;
  border: 2px solid #DEB388;
  margin: 0 auto 1.5em auto;
  padding: 1em;
  position: relative;
  width: 75%;
}

Zatím nic zvláštního. Kouzlit budeme až na :hover

#animation_test:hover
{
  -webkit-animation-name: shake_it;
  -webkit-animation-duration: 0.25s;
  -webkit-animation-iteration-count: infinite;
}

Nadefinoval jsem, aby se na :hover aktivovala animace s názvem shake_it. A předal jí pár proměnných. Stejně jako u transition jsem mohl animaci nadefinovat pro nějaký class, který by element dostal přes JavaScript. Chvilku to vstřebejte, já počkám…

To je sakra paráda, co?! Můžeme si na jednom místě nadefinovat animace, které budeme používat napříč celým projektem a u jednotlivých elementů se na ně jen odkážeme jménem.

A jak se definuje animace? Celkem jednoduše

@-webkit-keyframes shake_it
{
  0% { 
    opacity: 1;
    left: 0;
    top: 0;
  }
  25% {
    opacity: 0.85;
    left: 10px;
    top: -5px;
  }
  50% {
    opacity: 0.65;
    left: 0;
    top: 0;
  }
  75% {
    opacity: 0.45;
    left: -10px;
    top: 5px;
  }
  100% {
    opacity: 1;
    left: 0;
    top: 0;
  }
}

Procenta určují klíčová okýnka (keyframe) animace. 0% je výchozí stav – nemusela tam být vlastně žádná vlastnost, protože jsou všechny přejaté ze základní definice, ale přišlo mi to přehlednější. 25% říká prohlížeči, že ve čtvrtině animace chci, aby měl daný element tyto vlastnosti a prohlížeč spočítá a vykreslí vše, co je potřeba. Analogicky pro další keyframy, kterých můžu definovat kolik chci.

Najeďte myší nad náš pokusný element.

Animation Test – najeď na mě

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vlastnost animation zatím podporuje pouze WebKit a na něm postavené prohlížeče.

Schválně jsem zvolil střízlivé ukázky, aby vás to lákalo vyzkoušet si divočejší změny. Takže pokud ještě stále nemáte nainstalovanou poslední verzi WebKitu, utíkejte pro ni a pořádně si zablbněte.

V příštím dílu se totiž mrkneme na CSS Transforms, kde nás čekají kejkle s vlastnostmi jako jsou rotateY, translate3d, translateZ, matrix3d a další, s jejichž pomocí jdou dělat třeba takovéhle kousky (pouze WebKit/Safari4, ne Chrome).


Zdroje

25