Como posso animar minha imagem infinitamente usando CSS3

Question

Jan 15, 2013, 10:57 AM

animation css3 transform jquery transition

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?

leaveComments