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

• Honza Korbel česky i s příklady – Lehký úvod do CSS animace
• Obsáhlý popis na Webdesigners depot – CSS Transitions 101
• A pochopitelně – specifikace.
• Příklad: Apple – Why Mac
• Příklad: Apple – HTML5 Showcase

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

• Andy Clarke – For a Beautiful Web (najeďte na obal DVD)
• Já – http://www.hon­zasladek.com/ (popisky k jednotlivým bo­dům)
• Vy – ukažte svůj výtvor v komentářích

Odkazy jinam

• The Art of the Web – Animation Using CSS Transform
• Specifikace

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

• Honza Korbel česky i s příklady – Lehký úvod do CSS animace
• Tim Van Damme – CSS Animations
• Příklad: Andy Clarke – Hardboiled Web Design

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.