Webdesignérův průvodce po CSS3: animace

V minulém díle jsme si ukázali, jak udělat náš web krásnější s pomocí CSS3. Dnes nás čekají přechody, transformace a animace. Ty byly ještě nedávno hlavně doménou Flashe a JavaScriptu, nyní přicházejí přímo do CSS. Hlavní tahoun v jejich prosazování a implementováni je Apple (Webkit) a lze si s nimi skutečně vyhrát.

Stejně jako minule vás musím rovnou na úvod upozornit, že ne všechno bude fungovat v Internet Exploreru (včetně IE9). Velká většina nebude fungovat ani ve Firefoxu 3.6. Firefox by měl podporu pro přechody mít od verze 3.7, na CSS animacích se prý pracuje. Jinými slovy: nespoléhejte se, že cokoli z toho bude návštěvníkovi vašeho webu fungovat.

Přechody

Změny na webových stránkách jsou dnes většinou skokové. Odkaz má podtržení, najedu na něj myší a najednou ho nemá. Žádný přechod, který by lahodil oku. CSS3 transitions řeší právě tuto věc.

Transitions si vymyslel Apple do Webkitu a W3C je dlouho do specifikace nechtělo. Někteří lidé říkali, že tohle by měl řešit skriptovací jazyk, že to je pro CSS příliš komplexní. Nakonec ale Apple a Mozilla vytvoření modulu společně prosadili.

Podpora v prohlížečích

Transitions dneska najdeme v Safari , Chrome, Opeře a Firefoxu 3.7+. Internet Explorer se třeba přidá s verzí 10?

Jak fungují

Za pomoci transitions můžeme udělat přechod z jednoho stavu prvku na jiný. Použijeme je tedy hlavně při změnách :hover, :active a :focus.

Každá transition má css vlastnost, kterou animuje. Dále má dobu trvání ( duration) v sekundách. Např. tedy .25s pro 1/4 vteřiny. Také má časování, tedy způsob, jakým se přechod počítá. Například lineární ( linear), pro jednoduchý, postupný přechod. A nakonec může mít transition zpoždění ( delay), tedy dobu, kterou se počká před vykonáním přechodu po aktivaci prvku.

Výsledek by pak mohl vypadat třeba takhle:

a { color: blue; }
a:hover {
    color: red;
    /* OBSOLETE? */ -webkit-transition: color .25s linear; -moz-transition: color .25s linear; -o-transition: color .25s linear;
    transition: color .25s linear;
    }

Tento kód změní během čtvrt sekundy barvu odkazu z modré na červenou.

Co všechno lze nastavit

Transition můžeme nastavit téměř na jakoukoli vlastnost CSS (vypadá to, že výjimkou je box-shadow) a samozřejmě nemusíme animovat jen jednu vlastnost (jako jsme animovali barvu v našem příkladě), ale klidně všechny pomocí klíčkového slova „all“.

Hrát si můžeme také s nastavením stylu přechodu. Kromě linear se nám totiž nabízí hned několik zajímavých možností.

  • ease  – postupné zpomalování
  • ease-in  – zrychlení
  • ease-out  – zpomalení
  • ease-in-out  – nejdřív zrychli a poté zpomal
  • cubic-bezier(x1, y1, x2, y2)  – x a y jsou hodnoty mezi 1 a 0, které tvoří tvar beziérovy křivky.

Odkazy jinam a příklady

Transformace

Chtěli jste někdy nějaký element přiblížit jakoby lupou, otočit o 90°, či prostě jen na svém blogu trošku rozházet fotky, aby to vypadalo fakt parádně? Tak to se vám budou líbit CSS transformace, které všechno tohle přináší.

Podpora v prohlížečích

Transformace jsou na tom s podporou výborně. Kromě Internet Exploreru je podporují všechny zbylé prohlížeče (Firefox, Chrome, Safari, Opera) ve svých stabilních verzích.

Jak fungují

Prvek, kterému dáte tranformation, se nejprve standardně umístí do stránky a poté se na něj aplikuje transformace. Funguje to stejně, jako když aplikujete position:relative;, ani v nejmenším to tedy neovlivní zbytek stránky.

S transformacemi můžete dělat v podstatě čtyři věci:

  • posunout prvek někam jinam o tolik, na osách x a y, kolik uvedete – translate ( transform: translate(100px,50px);  )
  • otočit prvek o libovolný počet stupňů – rotate ( transform: rotate(90deg);  )
  • zvětšit prvek (v násobcích velikosti, tedy např. 2 znamená, že výsledek je 2× větší než originál) – scale ( transform: scale(2);  )
  • zkosit prvek (o kolik stupňů se prvek zkosí od os x a y) – skew ( transform: skew(10deg,10deg);  )

Aby vám tyto věci dneska fungovaly, musíte samozřejmě přidat ty správné vendor prefixy.

Co s tím provádět + příklady

Transformaci můžeme aplikovat na jakýkoli element a samozřejmě ji můžeme aplikovat až, například, po najetí myší. V kombinaci s transitions se váš web tak může proměnit z průměrného na okouzlující.

Odkazy jinam

Animace

A nakonec přichází to nejlepší – animace.

Podpora v prohlížečích.

Zatím podporují pouze Chrome a Safari. Mozilla prý podporu chystá.

Jak fungují

Trošku složitěji. Ale ne zas tak moc. Pojďme na to v krocích.

  1. Pojmenujme si animaci: -webkit-animation-name: animace;
  2. Nastavme dobu trvání: -webkit-animation-duration: 2s;
  3. Nastavme kolikrát se má opakovat: -webkit-animation-iteration-count: infinite;
  4. Nastavme jak se má počítat (funguje stejně jako u transitions):  -webkit-animation-timing-function: linear;
  5. Definujme samotnou animaci.
@-webkit-keyframes animace {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(360deg);
    }
}

A základ bychom měli. Hrát si s tím ovšem můžeme mnohem více, například nastavovat klíčové momenty animace v % doby trvání:

@-webkit-keyframes animace  {
    20% {
        -webkit-transform:rotate(20deg);
    }
    80% {
        -webkit-transform:rotate(90deg);
    }
}

Samozřejmě těchto klíčových momentů můžeme nastavit kolik chceme. Možnosti jsou nekonečné.

Odkazy jinam a na příklady

Závěrem

Půjčím si větu od Honzy Korbela – To je sakra paráda, co? A to jste ještě neviděli 3D transformace… (Ale ty už si zájemci jistě nastudují sami, popř. se k nim v budoucnu vrátíme.)

Příště přijdou Media-queries a lehce se dotkneme Responsive Web Designu.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 9

Přehled komentářů

kerth ???? 4 znaky
mikiqex Webové hry a prezentace
juraj Re: Webové hry a prezentace
Martin Michálek Re: Webové hry a prezentace
Luboš Půjde to v prohlížečích nějak vypnout - zablokovat ?
MCZ Příklad a jeden tip...
Jan Sladek Re: Příklad a jeden tip...
w1k 3D rotujuca kocka v css3
vks Re: Webdesignérův průvodce po CSS3: animace
Zdroj: https://www.zdrojak.cz/?p=3337