girando interminablemente imagen/div (cross-browser)

Question

Estoy tratando de encontrar una solución multi-navegador para este efecto, pero esto es lo mejor que he podido encontrar:

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

También es muy amigable con la CPU.

Algunas soluciones javascript no cross-browser usan casi el 50% de CPU. En mi opinión, esa no es una solución para uso web.

El ejemplo proporcionado funciona en Chrome 17, Firefox 11 y en Safari 5.1.7.

Entonces mi pregunta es: ¿hay alguna manera de crear este efecto (sin flash o java, por supuesto) para que funcione también en Opera e 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

Es posible que desee ver esto

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

No es exactamente el mismo efecto que está buscando, pero puede encontrar sugerencias y ejemplos de código en el enlace disponible.

Answer 2

Esta es también una posible solución para probar, también. http://neteye.github.com/activity-indicator.html

Answer 3

Así es como lo estoy implementando. Funciona en Chrome, Safari, Firefox y, por ejemplo, 11. He probado algunas versiones de Chrome, Safari y Firefox, pero lamento que no tenga una lista sólida de las versiones.

De acuerdo con este http://css-tricks.com/snippets/css/keyframe-animation-syntax/ las versiones compatibles son 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);} 
}