Transitions (přechody) - Český CSS3 manuál
Za pomocí CSS3 můžete snadno obohatit změnu elementu bez potřeby Flashe či JavaScriptu.
Použití je snadné: zadáme, které vlastnosti má být efekt přiřazen a zvolíme mu dobu průběhu. Pozn: Výchozí hodnota délky efektu je nulová, pokud ji tedy nezadáme efekt se neprojeví.
Například:
div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ }
Nyní jsme určili, že změna šířky divu bude probvázena plynule po dobu 2 sekund. Nejčastěji se nám to hodí při najetí na daný element. Přidáme tedy změnu šířky:
div:hover { width:300px; }
Pokud chcete změn více, jednoduše je oddělte čárkou
div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }
Nastavit si dále můžeme dobu čekání na start efektu a způsob výpočtu rychlosti efektu (ze začátku pomalejší a ke konci rychlejší nebo naopak, či normální po celou dobu).
Příkladné nastavení:
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; }
A to samé nastavené v jednom řádku:
div { transition: width 1s linear 2s; }
Možnosti pro transition-timing-function
- linear -> stejná rychlost od začátku až ke konci (cubic-bezier(0,0,1,1))
- ease -> pomalejší start, ve prostřed zrychlení a ke konci dojede opět pomaleji (cubic-bezier(0.25, 0.1, 0.25, 1))
- ease-in -> pomalejší start (cubic-bezier(0.42,0,1,1))
- ease-out -> pomalejší konec (cubic-bezier(0,0,0.58,1))
- ease-in-out - pomalejší start a konec (cubic-bezier(0.42,0,0.58,1))
- cubic-bezier(n,n,n,n) - umožňuje navolit si vlastní rychlost efektu hodnota n je od 0 do 1