Endlessly Spinnen Bild/div (Cross-Browser)

Question

Ich versuche, eine Cross-Browser-Lösung für diesen Effekt zu finden, aber das ist das Beste, was ich finden konnte:

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

Es ist auch sehr CPU-freundlich.

Einige nicht browserübergreifende JavaScript-Lösungen verwenden fast 50% CPU. Meiner Meinung nach ist das keine Lösung für den Web-Einsatz.

Das mitgelieferte Beispiel funktioniert in Chrome 17, Firefox 11 und in Safari 5.1.7.

Also meine Frage ist: Gibt es eine Möglichkeit, diesen Effekt zu erstellen (ohne Flash oder Java natürlich), so würde es auch in Opera und IE funktionieren?

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

Sie könnten diese

sehen wollen

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

Es ist nicht genau der gleiche Effekt, den Sie suchen, aber Sie können Hinweise und Beispielcode von verfügbaren Link finden.

Answer 2

Dies ist auch eine mögliche Lösung zu versuchen. http://neteye.github.com/activity-indicator.html

Answer 3

Dies ist, wie ich es implementiere. Es funktioniert auf Chrome, Safari, Firefox und ie 11. Ich habe ein paar Versionen von Chrome, Safari und Firefox getestet, aber es tut mir leid, dass ich keine solide Liste der Versionen habe.

Entsprechend dieser http://css-tricks.com/snippets/css/keyframe-animation-syntax/ sind die unterstützten Versionen 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);} 
}