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.

Co by měl umět webový kodér?

29. 3. 2015 v příručce

Kóder je technik, který oživuje uživatelská rozhraní webové prezentace nebo webové aplikace. Osnova pro výuku nebo aktualizaci znalostí o profesi.

Vyzkoušel jsem WebFlow. Je to velká věc, ale práci kóderům jen tak nevezme

12. 3. 2015 na blogu

Ale u mikrosajt nebo jednodušších prezentačních webů si designéři už dneska opravdu vystačí s malým nebo vůbec žádným dohledem kódera.

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.