Como posso animar minha imagem infinitamente usando CSS3
Eu tenho uma imagem que tem esses estilos:
<img src="images/head-tails.gif" class="graphs" />
.graphs {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
/* -webkit-animation:animated 5s infinite; */
/* -moz-animation:animated 5s infinite; */
/* -o-animation:animated 5s infinite; */
/* animation:animated 5s infinite; */
}
.graphs:hover {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
Então, quando eu pairar sobre a imagem, ela gira 360 graus, como uma moeda. O que eu gostaria de fazer, porém, é quando a página carrega, a imagem vai fazer essa animação (a rotação) infinitamente, sem necessidade de passar o mouse. Como posso fazer isso funcionar?