为所有主流浏览器创建css3无限旋转

时间:2012-05-25 07:58:22

标签: javascript gwt animation css3 rotation

我使用GWT(javascript)和CSS3属性创建了一个无限旋转动画:我创建了一个计时器,它将“transform”属性重复设置为“rotate(currentVal + 360)”(对于webkit,opera,firefox,safari)。 问题是这个方法在firefox(Intel Core2 Duo 1.8 GHz)上使用了大约10-15%的CPU(在chrome上)和20-25%的CPU,我不明白为什么。 是否有替代解决方案?(对于所有主流浏览器,不仅仅是chrome或safari,请说......)或者我可能在这里做错了吗?

1 个答案:

答案 0 :(得分:1)

目前CSS3还没有硬件加速,至少没有你测试过的浏览器。 但是除了CSS3之外还有其他一些旋转图像的可能性:

这些库与SVG一起使用,这是恕我直言,消耗大量的cpu。 如果您只想旋转图像,则可能不需要整个raphaeljs库。在这种情况下,您应该查看规格:w3.org/TR/SVG11

实例: http://upload.wikimedia.org/wikipedia/commons/4/4f/Soccer_ball_animated.svg