CSS3 Animations

Složitější animace

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.

CSS3 animace se zatím hodí hlavně na jednoduché vychytávky kde se dobře dělá fallback pro MSIE — spinner („tvrdý“ fallback bez animace nevadí) nebo pokličku nad hrncem (v IE9 uvidíte jednoduchý posun na mouseover). Někdo se sice nebojí tvořit klidně menší filmy, ale vzhledem k ne-podpoře CSS animací v devítce a starších explorerech mají na standardních „desktopových“ webech složitější CSS3 animace zatím jen úzkou škálu použití.

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

#example {
  animation: _nazev_animace_ _cas_trvani_;
}

@keyframes _nazev_animace_ {
  _cas_   { _deklarace_vlastnosti_ }
  _cas_   { _deklarace_vlastnosti_ }
}

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

Deklarace jednoduché animace může vypadat třeba takto:
@keyframes otoc_me { 100% {transform:rotate(-360deg); } }
— každý element, u kterého zavoláte animaci otoc_me se otočí o 360 stupňů proti směru hodinových ručiček. Všimněte si, že specifikujeme jen cílový stav. Prohlížeč si výchozí i celý průběh vypočte sám.
#example { animation: otoc_me 1s; }
— tady bude doba otáčení přesně jednu vteřinu.

Příklad

Boxík bude po najetí kurzorem blikat.

#animation-example {
  background: #ccc;
}

#animation-example:hover {
  -webkit-animation: my_blink_animation 1s infinite; /* Saf5, Chrome */
  -moz-animation: my_blink_animation 1s infinite; /* FF5+ */
  -ms-animation: my_blink_animation 1s infinite; /* IE10 */
}

@-webkit-keyframes my_blink_animation {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100%   { opacity: 1; }
}

@-moz-keyframes my_blink_animation {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100%   { opacity: 1; }
}

@-ms-keyframes my_blink_animation {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100%   { opacity: 1; }
}

Tipy a triky

Ve Webkit prohlížečích můžete při spouštění animace někdy sledovat nepříjemné probliknutí celé stránky. Pomáhá vynucené zapnutí hardwarové akcelerace například takto .animovany_element { -webkit-transform: translateZ(0); }
Rozdíl mezi přechody (transitions) a animacemi: Přechody se uplatňují po změně „hlídané“ vlastnosti, animace se uplatňují po přidání vlastnosti animation. CSS animace poskytují daleko větší možnosti ovlivňovat svůj průběh.
Tady je varianta loadovátka kde všechny tři elementy rozpohybovává stejná animace a každý má jiné zpoždění od Honzy Korbela.
Další demo ukazuje analogové „hodiny“ vytvořené Jirkou Zralým.