How can I animate my image infinitely using CSS3

Question

I have an image that has these styles:

<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);
}

So when I hover over the image it rotates 360 degrees, like a coin. What I would like to make though is when the page loads, the image will do this animation (the rotation) infinitely, without need to hover over my mouse. How I can make this work?

score 1 · Accepted Answer · answered Jan 15 '13 at 10:15

1

You can use keyframe animation for this. Write like this:

.graphs {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:2s;
}
@-webkit-keyframes orbit { 
from { -webkit-transform:rotateY(0deg) } 
to { -webkit-transform:rotateY(360deg) } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotateY(0deg) } 
to { -moz-transform:rotateY(360deg) } 
}

Check this http://jsfiddle.net/ktPev/1/

answered Jan 15 '13 at 10:15

sandeep

91,313
23
137
155

In the link you gave me it works fine, its exactly what i want to make, but for some reason in fy file doesn't work – ltdev Jan 15 '13 at 10:25
Ok i found out what was wrong and fixed it. Thanks! one more question please.. If I have more images with the same class, how can i make them rotate with some delay-time, so that they are not synchronized??? – ltdev Jan 15 '13 at 10:30
I think you'll need to use different classes and then use the animation-delay property to define when each animation should start. Here's and updated version of my demo below - http://jsfiddle.net/ccryz/7/ – Christofer Vilander Jan 15 '13 at 13:33
2

@ChristoferVilander good one but you can achieve this even less code check this http://jsfiddle.net/ccryz/8/ – sandeep Jan 15 '13 at 13:44

Christofer Vilander · Answer 2 · 2013-01-15T10:36:19.190

0

Use keyframe animations instead. Uncomment the commented code and change the animation-timing-function to linear. Like this animation: animated 5s linear infinite;. Then define the keyframe animation, for example like this (I've used -webkit- in my example):

@-webkit-keyframes animated {
        to { -webkit-transform: rotateY(360deg); }
}

and it should work!

Here's a DEMO

edited Jan 15 '13 at 10:36

answered Jan 15 '13 at 10:19

Christofer Vilander

17,232
6
31
26

How can I animate my image infinitely using CSS3

2 Answers2

Linked