Endlessly filatura immagine/div (cross-browser)

Question

Sto cercando di trovare una soluzione cross-browser per questo effetto, ma questo è il meglio che sono riuscito a trovare:

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

E 'anche molto favorevole alla CPU.

Alcune soluzioni javascript non cross-browser utilizzano quasi il 50% di CPU. A mio parere, questa non è una soluzione per l'uso web.

L'esempio fornito funziona in Chrome 17, Firefox 11 e Safari 5.1.7.

Quindi la mia domanda è: esiste un modo per creare questo effetto (senza flash o java ovviamente) quindi funzionerebbe anche in 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

Si potrebbe desiderare di vedere questo

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

Non è esattamente lo stesso effetto che si sta cercando, ma è possibile trovare suggerimenti e codice di esempio dal collegamento disponibile.

Answer 2

Questa è anche una possibile soluzione da provare. http://neteye.github.com/activity-indicator.html

Answer 3

Ecco come lo sto implementando. Funziona su chrome, safari, firefox e ie 11. Ho provato alcune versioni di chrome, safari e firefox ma mi dispiace non avere una lista completa delle versioni.

In base a questo http://css-tricks.com/snippets/css/keyframe-animation-syntax/ le versioni supportate sono 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);} 
}