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 nebo docela divokých hover stavů nad boxy.

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.

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

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.

Jednodušší vkládání webfontů pomocí WOFF a WOFF2

28. 1. 2016 na blogu

Formát WOFF2 už má slušnou podporu – Firefox, Chrome, Opera mohou tvořit něco kolem třetiny až poloviny vaší návštěvnosti.

Kontrolní seznam frontend kodéra

21. 1. 2016 v příručce

Co všechno by měl webový kodér zkontrolovat než odevzdá svou práci?

Kurz „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: 21. dubna.

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

16. února SVG
18. února Optimalizace rychlosti načítání
26. února Principy Javascriptu
24. března Bootstrap
5. května Responzivní design

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.

Vzhůru do CSS3 Vzhůru do CSS3
Ebook o dnešní
frontend kódeřině.
Koupit →