...">
Geek Answers Handbook

How can I endlessly animate an image using CSS3

I have an image that has the following 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); }

Therefore, when I hover over the image, it rotates 360 degrees, like a coin. What I would like to do is when the page loads, the image will do this animation (rotation) endlessly, without having to hover over my mouse. How can I do this job?

+4
source share
2 answers

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 out http://jsfiddle.net/ktPev/1/

+1
source

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

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

and it should work!

Here demo

0
source

More articles:


All Articles