Vô tận quay hình ảnh/div (cross-browser)

Question

Tôi đang cố gắng để tìm một giải pháp qua trình duyệt cho hiệu ứng này, nhưng đây là tốt nhất mà tôi có thể tìm thấy:

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

Đây cũng là rất thân thiện với CPU.

Một số giải pháp javascript không qua trình duyệt sử dụng gần 50% CPU. Theo tôi, đó không phải là giải pháp cho việc sử dụng web.

Ví dụ được cung cấp hoạt động trong Chrome 17, Firefox 11 và Safari 5.1.7.

Vì vậy, câu hỏi của tôi là: Có cách nào để tạo hiệu ứng này (không có flash hoặc java tất nhiên) vì vậy nó cũng sẽ hoạt động trong Opera và 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

Bạn có thể muốn thấy điều này

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

Nó không chính xác cùng tác dụng mà bạn đang tìm kiếm, nhưng bạn có thể tìm gợi ý và mã mẫu từ liên kết có sẵn.

Answer 2

Đây cũng là một giải pháp khả thi để thử. http://neteye.github.com/activity-indicator.html

Answer 3

Đây là cách tôi đang triển khai. Nó hoạt động trên chrome, safari, firefox và ie 11. Tôi đã thử nghiệm một vài phiên bản chrome, safari và firefox nhưng tôi xin lỗi vì tôi không có danh sách các phiên bản vững chắc.

Theo điều này http://css-tricks.com/snippets/css/keyframe-animation-syntax/ các phiên bản được hỗ trợ là 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);} 
}