CSS3 Transitions

Animace přechodů mezi stavy vlastností elementu

IE6
IE7
IE8
IE9
Firefox
Chrome
Opera
Safari
MobileSafari
AndroidBrowser

Poznámka: Šířka boxů vyznačuje podíl prohlížeče na návštěvnosti českých webů podle Rankings.cz z června 2012.

Transitions nemají z nových vlastností zrovna nejširší podporu, na druhou stranu když je budete 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.

Základní syntaxe podle W3C bez prefixových variant

transition:
  _vlastnost_
  _trvani_
  (_funkce_prubehu_)
  (_zpozdeni_);

→ Aktuální syntaxe na css3please.com
→ Specifikace na W3C.org
→ Za jakých podmínek můžu používat? - HTML5please.us
→ Dokumentace na MDN

Příklad

Po najetí myši tento vytučněný element postupně změní barvu.

#transition-example b {
  -webkit-transition: all 1s;  /* Saf3.2+, Chrome */
  -moz-transition: all 1s;  /* FF4+ */
  -ms-transition: all 1s;  /* IE10 */
  -o-transition: all 1s;  /* Opera 10.5+ */
  transition: all 1s;
  background-color: #666;
  color: #fff;
  padding: 3px;
}

#transition-example b:hover,
#transition-example b:focus,
#transition-example b:active {
  background-color: #f3f;
}

Tipy a triky

Oddělením čárkou můžeme nadefinovat více vlastností a přidáním zpoždění pak jednotlivé přechody řetězit.
Jsou předdefinované čtyři funkce průběhu, ale můžeme si vytvořit vlastní.
Lze animovat jen určité specifikované CSS vlastnosti.
S přechody jde generovat spousty legrace typu animace rámečku nebo docela divoké hover stavy.