Martin Michálek Martin Michálek  – 1. 8. 2013

Animace přechodů mezi stavy vlastností elementu.

Zní to možná komplikovaně. Představte si ale tuto situaci:

.box {
  background: green;
}

.box:hover {
  background: blue;
}

Nic složitého. Představte si také, že 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 je ale spustit například přidáním třídy javascriptem po kliknutí .box.clicked { background: blue; }.

Zkuste si to na cdpn.io/e/hJljB.

V praxi

Takto můžete animovat téměř libovolnou CSS vlastnost včetně pozicování nebo transformací.

Včetně docela divokých hover stavů nad boxy. tympanus.net/Tutorials/OriginalHoverEffects

Plnohodnotný animační nástroj to ovšem není. Pokud chcete mít průběh animace zcela pod kontrolou, 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 ve zkratce 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í hodnotou jako transition-property: none. Příklad:

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

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

Je 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 na W3.org. vrdl.in/hgx4v

Funkce průběhu

Samostatně jako transition-timing-function: ease. Vybrat si můžete z přednastavených. Více je na W3.org. vrdl.in/p3rh6

Lze si samozřejmě také nadefinovat vlastní. [matthewlein.com/ceaser](http://matthewlein.com/ceaser].

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

Obě animace v následujícím příkladu trvají 200 milisekund. Druhá, která animuje background-color, se spouští s vteřinovým zpožděním po skončení první:

transition: transform 200ms,
  background-color 200ms 1s;

Nejlépe je to opět vidět v prohlížeči: cdpn.io/e/vIGAk.

Podpora v prohlížečích

IE10+. Když budete transition používat pro dekorativní (nikoliv funkční) animaci, můžete ji udělat výrazně snadněji než Javascriptem a ve starších prohlížečích nebude chybějící animace 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.

Komentáře

Novinka
Nyní je možné přidávat komentáře.
Pro přidání názoru se prosím
přihlaste nebo si zřiďte účet.