無休止旋轉圖像/ DIV（跨瀏覽器）

Question

我試圖找到這個效果的跨瀏覽器的解決方案，但是這是我能找到的最好：

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

這也是非常友善的CPU。

一些非跨瀏覽器JavaScript解決方案使用幾乎50％的CPU。在我看來，這不是網絡使用的解決方案。

提供的示例適用於Chrome 17，Firefox 11和Safari 5.1.7。

所以我的問題是：有沒有一種方法來創建這種效果（當然沒有flash或java），所以它也可以在Opera和IE中使用？

編輯：

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

您可能希望看到這個

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

這與您尋找的效果不完全相同，但您可以從可用鏈接中找到提示和示例代碼。

Answer 2

這也是嘗試的可能解決方案。 http://neteye.github.com/activity-indicator.html

Answer 3

這就是我如何實現它。它適用於Chrome，safari，firefox和ie 11.我已經測試了幾個版本的Chrome，safari和firefox，但是很抱歉，我沒有一個完整的版本列表。

根據此http://css-tricks.com/snippets/css/keyframe-animation-syntax/支持的版本爲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);} 
}