Infinitely rotating image / div (cross browser)

Question

I am trying to find a cross-browser solution for this effect, but this is the best I could find:

http://jsfiddle.net/fE58b/19/

It is also very convenient for the processor.

Some cross-browser javascript solutions use almost 50% of the CPU. In my opinion, this is not a solution for use on the Internet.

The above example works in Chrome 17, Firefox 11 and Safari 5.1.7.

So my question is: is there a way to create this effect (without flash or java, of course), so it will work in Opera and IE too?

EDIT:

HTML

<div id="starholder"> <div id="star"></div> </div>​ 

CSS

 @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } #starholder { position: relative; width: 400px; height: 400px; margin: 100px 0 0 100px; } #star { background: url(http://3.bp.blogspot.com/__RwzDZn-SJM/RoEJcKxDs6I/AAAAAAAAAAQ/XYAyhQG2kcw/s320/hypnosis.gif) 0 0 no-repeat; position: absolute; top: -100px; left: -100px; width: 320px; height: 320px; -webkit-animation-name: spin; -webkit-animation-duration: 12000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 12000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 12000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } 

Answer 1

This is how I implement it. It works on chrome, safari, firefox etc. 11. I tested several versions of chrome, safari and firefox, but I'm sorry that I do not have a complete list of versions.

According to this http://css-tricks.com/snippets/css/keyframe-animation-syntax/ versions of Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+ are supported.

 .rotate { display: inline-block; -webkit-animation-name: rotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotate; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-name: rotate; -o-animation-duration: 2s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } @-webkit-keyframes rotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes rotate { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-o-keyframes rotate { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } 

Answer 2

You might want to see this.

http://fgnass.github.com/spin.js/

This is not exactly the effect you are looking for, but you can find the hints and sample code from the available link.

Answer 3

This is also a possible solution. http://neteye.github.com/activity-indicator.html