CSS3 Transitions: jednoduché animace přechodu

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

S přechody jde vytvářet spousty legrace typu animace rámečku: http://kratce.vzhurudolu.cz/post/18092366948/css3-rolecek.

…nebo 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: w3.org/TR/css3-transitions/#animatable-properties

Funkce průběhu

Samostatně jako transition-timing-function: ease. Vybrat si můžete z přednastavených: w3.org/TR/css3-transitions/#transition-timing-function

…nebo si 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.

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii CSS.

Problémy v CSS kódu: závorková pekla, komentáře a „zlomostřednost“

21. 7. 2016 na blogu

Během spolupráce na nové verzi eshopového řešení ShopSys dělám review CSS kódu. Podívejme se společně na pár špeků.

Vydal jsem „Vzhůru do CSS3“ ve verzi 1.3: flexbox, calc(), Browsersync, Grunt a další

11. 7. 2016 na blogu

Tentokrát se jedná o větší aktualizaci. Pokud ebook ještě doma nebo ve firmě nemáte, je tady příležitost si jej pořídit.


Martin Michálek

Autor: Martin Michálek

Nezávislý frontend designér s šestnáctiletou praxí a nadšením pro moderní webové postupy a technologie. Píše Vzhůru dolů, školí a je k dispozici pro konzultace.

Kurz „Dnešní webová kodéřina“

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 6. října.

Termíny dalších veřejných školení

29. září SVG
13. října Responzivní design
27. října Optimalizace rychlosti načítání
24. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč