Animace na webových stránkách byly vždy bez Adobe Flash nebo jQuery (MooTools, a dalších javascriptových knihoven) nemožné. Po příchodu CSS3 přišly nové vlastnosti, které jsou velmi příjemné v využití k animování jednotilvých prvků na webu. Kdo ví co je to CSS3, ví taky, že nefunguje v všech prohlížečích – to je informace na dlouhé vysvětlování. Jednoznačně Vám prozatím nepojede nic v tomto příspěvku pokud používáte Internet Explorer.

Pokud máte Internet Explorer, stáhněte si Google Chrome nebo Mozilla Firefox ! ASAP !

Přesná kompatibilita této CSS Transition vlastnosti

Internet Explorer žádná verze až na poslední vývojovou IE10
Firefox 4.0 +
Opera 10.5 +
Safari 3.2 +
Chrome (WebKit) všechny

CSS Transition

První možností jak aplikovat animaci do webové stránky (používám snad na každém projektu) je vlastnost transition.  Do prvku, který chcete animovat stačí tuto vlastnost přidat, asi takto:

nazev-prvku {
	-webkit-transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

Když například náš prvek bude mít různé pozicující vlastnosti a po najetí kurzorem (:hover) se tyto vlastnosti změní, bude se prvek plynule pohybovat dle daných hodnot. Přesně tato funkce byla použita…