CSS3 Transitions – jednoduché animace přechodu

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.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii CSS.

Critical CSS a zrychlení zobrazení stránky

4. 6. 2015 na blogu

Vkládání nezbytného CSS v inline podobě přímo do HTML kódu je způsob jak urychlit zobrazení stránky.

Směřuje CSS od preprocesingu k postprocesingu?

31. 5. 2015 na blogu

Myslím, že ano. Preprocesory přišly s řadou užitečných vlastností a vyplňují potřeby, které samotné CSS nezvládalo uspokojit. Přišel ale Grunt a Gulp, změnily se naše pracovní postupy a některé důvody pro preprocesory se tím vytratily.

Martin Michálek

Autor: Martin Michálek

Nezávislý frontend designér s více než 14letou praxí a nadšením pro moderní webové postupy a technologie. Kromě psaní pořádá školení a je k dispozici pro konzultace.

Vzhůru do CSS3 Vzhůru do CSS3
Ebook o moderním
frontendu. Koupit
za 249 Kč →