Prvo CSS animacije rade samo na Webkit renderu tj. Google Chrome, Safari i drugim browserima zasnovanim na Webkit renderu, ali to nije zanemarljiv broj korisnika ako se uzme u obzir da ovi browseri imaju tržišni udeo od oko 21% prema poslednjim statistikama za avgust 2010. godine. Pomoću JavaScript možete razdvojiti stilove za određene browsere i time vam se pruža prilika da animiranjem sadržaja impresionirate bar vaše posetioce sa browserom zasnovanim na Webkit renderu. Važno je napomenuti da za ovaj vid animacija se ne koristi JavaScript već isključivo CSS, ali pošto je tehnologija u razvoju mogućnosti su za sad veoma skromne.
PRIMER ( VIDLJIVO SAMO ZA GOOGLE CHROME / SAFARI KORISNIKE )
www.baguje.com
CSS za primer iznad
[code language=”css”]div.animacija {
height: 100px;
padding: 100px;
-webkit-animation-name: movearound;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease;
font-family:Verdana;
text-transform: uppercase;
text-align: center;
}
@-webkit-keyframes movearound {
from {
width: 100px;
background: #dbdbdb;
color: #000000;
font-size:12px;
opacity: 0.5;
-webkit-transform: scale(0.5) rotate(15deg);
}
to {
width: 610px;
background: #404040;
color: #ffffff;
font-size:50px;
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}[/code]
Još neke animirane varijante možete pogledati na http://www.css3maker.com/css3-animation.html.