CSS3 Transitions

Animace přechodů mezi stavy vlastností elementu.

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

OOCSS: objektové psaní CSS

11. 5. 2017 v příručce

Object Oriented CSS je koncept organizace kódu, který je často vykládán mylně. Přepsal jsem proto starší článek a vezmu to do podrobna.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

Veřejná školení

Dnešní webová kodéřina

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: 27. září.

29. května Optimalizace rychlosti načítání
1. června Mistrovský vývoj webů na WordPressu
19. října SVG
16. 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.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací