CSS3 Transitions

Obsah stránky

Animace přechodů mezi stavy vlastností elementu.

Zní to možná složitě. Představte si ale tuhle situaci:

.box { 
  background: green; 
}

.box:hover { 
  background: blue; 
}

Vy ale chcete změnu barvy po najetí myši animovat. A právě k tomu slouží transitions, animace přechodů mezi stavy CSS vlastností.

.box { 
  background: green; 
  transition: 300ms;
}

.box:hover { 
  background: blue; 
}

CSS přechody se typicky spouští po najetí myši, můžete ji ale spustit například přidáním třídy, kterou přidáte javascriptem po kliknutí/tapnutí .box.clicked { background: blue; }.

Zkuste si to naživo:

See the Pen CSS3 transition basic by Martin Michálek (@machal) on CodePen

V praxi

A teď si představte, že takto můžete animovat téměř libovolnou CSS vlastnost včetně pozicování, transformací. Taky vidíte ten obří potenciál? Ano, s přechody jde generovat spousty legrace typu animace rámečku nebo docela divoké hover stavy nad boxy.

Takže víme, že CSS3 Transitions umí udělat animace přechodu. Plnohodný animační nástroj to ovšem není. Podívejte se na CSS3 animace.

Ale pozor, i s transitions lze hrát velké divadlo! Čtěte dále.

Syntaxe

transition:
  (_hlidane_vlastnosti_)
  _trvani_animace_
  (_funkce_prubehu_)
  (_zpozdeni_)
  (, _dalsi_transition_);

Trvání animace

Jediná povinná položka v shorthandu transition. Čas můžete udat v sekundách nebo milisekundách. Samostatně tedy s výchozí hodnotou jako transition-duration: 0s.

Hlídané vlastnosti

Z vlastností, které v elementu měníte si můžete vybrat jen některé. Ostatní se prostě nebudou animovat. Samostatně s výchozí hodnoutou jako transition-property: none. Příklad:

.box { 
  background: green; 
  transition: margin 300ms;
}

.box:hover { 
  background: blue; 
  margin-left: 200px;
}

Dobré vědět, že animované přechody nelze aplikovat úplně na všechny CSS vlastnosti. Třeba vlastnost display byste animovali marně. Tady je seznam animovatelných.

Funkce průběhu

Samostatně jako transition-timing-function: ease. Vybrat si můžete z přednastavených nebo si nadefinovat vlastní.

Zpoždění

Animaci můžete spustit o chvíli později než nastane změna vlastností. Samostatně jako transition-delay: 0s.

Řetězení animací

Pokud měníte více vlastností, nemusíte je animovat najednou. Docela snadno je poskládáte za sebe. A otevřete tím úplně novou dimenzi možností tvorby animací.

Druhá animace se v následujícím příkladu spouští s vteřinovým zpožděním po dokončení první:

See the Pen Příklad: CSS3 transition by Martin Michálek (@machal) on CodePen

Podpora v prohlížečích

IE10+. Když budete transition používat pro dekorativní (nikoliv funkční) přechody, můžete je udělat výrazně snadněji než Javascriptem a ve starších prohlížečích nebude změna stavu bez přechodu nikomu vadit.

Pokud děláte funkční animaci (např. indikaci stavu nahrávání), připravte pomocí detekce vlastností alternativní řešení pro starší prohlížeče.

  • IE8
  • IE9
  • IE10
  • Firefox
  • Chrome
  • Opera
  • Safari
  • ChromeMobile
  • MobileSafari
  • AndroidBrowser

Šířka boxů vyznačuje podíl prohlížeče na návštěvnosti českých webů podle Rankings.cz ze září 2013. Podívejte se ale raději do statistik konkrétního projektu.

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve většině případů je potřeba použít vendor prefix varianty. Na aktuální stav potřeby prefixových variant se podívejte na caniuse.com.

comments powered by Disqus
Související kurzy

Podívejte se na všechny termíny školení nebo si je objednejte do firmy.

Twitter Facebook Google Plus RSS


Obsah na této stránce je publikován pod Creative Commons licencí Uveďte autora, neužívejte komerčně 3.0 Česko
martin@vzhurudolu.czdalší kontakty