Wie kann ich mein Bild mit CSS3 unendlich animieren?
Ich habe ein Bild, das diese Stile hat:
<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);
}
Wenn ich mich also über dem Bild befinde, dreht es sich wie eine Münze um 360 Grad. Was ich aber machen möchte, ist, dass beim Laden der Seite das Bild diese Animation (die Drehung) unendlich ausführt, ohne dass ich mit der Maus darüber fahren muss. Wie kann ich das schaffen?