Endlessly spinning image/div (cross-browser)

Question

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

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

It is also very CPU friendly.

Some non-cross-browser javascript solutions use almost 50% CPU. In my opinion, that's not a solution for web use.

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

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

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 am implementing it. It works on chrome, safari, firefox and ie 11. I've tested a few versions of chrome, safari and firefox but I'm sorry that I don't have a solid list of the versions.

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

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