Testování podpory CSS3 animací
(zaměřeno na podporu v IE, Firefox, Opera, Safari a Google Chrome)
-
CSS3 animace již celkem slušně fungují ve Firofoxu, Opeře, Exploreru 10 a Chrome. Nefungují vůbec v IE8/9 a Safari (v r. 2012 byla ukončena podpora Safari pro Windows,
testujte již pouze na iOS firmy Apple).
Plynulé otáčení ale zatím funguje v Chrome pouze s vendor prefixem -webkit-, plynulá změna obrázku v jiný naopak funguje
zatím pouze v Google Chrome a Opera.
Pro zobrazení efektu animace najeďte myší dovnitř objektů níže.
#animace { background-color: white;
transition: all 1s } // plynule změní barvu pozadí po najetí myši, nefunguje v Safari a IE 8/9
#animace:hover { background-color: lightblue; }
<div id="animace"> </div>
#animace { background-image: url(obr1.png);
transition: all 1s ease-out} // plynule změní obrázek v jiný po najetí myši, funguje zatím pouze v Google Chrome a Opeře
#animace:hover { background-image: url(obr2.png); }
<div id="animace"> </div>
#animace { transition: all 1s ease-out; } // plynule otočí blok po najetí myši, v Chrome zatím funguje pouze s vendor prefixem -webkit-, nefunguje v Safari a IE 8/9
#animace:hover { -moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<div id="animace2"> </div>
pepe © 2013