¿Cómo puedo animar mi imagen infinitamente usando CSS3?
Tengo una imagen que tiene estos 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);
}
Así que cuando me coloco sobre la imagen, ésta gira 360 grados, como una moneda. Sin embargo, lo que me gustaría hacer es cuando la página se carga, la imagen hará esta animación (la rotación) infinitamente, sin necesidad de desplazarme sobre mi mouse. ¿Cómo puedo hacer que esto funcione?