javascript - 无限旋转图像/div(跨浏览器)

我正在尝试为此目的找到跨浏览器的解决方案，但这是我能找到的最好的解决方案:

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;
}

最佳答案

这就是我实现它的方式。它适用于chrome，safari，firefox和ie11。我已经测试了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);}
}

关于javascript - 无限旋转图像/div(跨浏览器)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11129191/