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

标签 javascript gwt animation css rotation

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

最佳答案

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

这些库与 SVG 一起工作,恕我直言,CPU 消耗较少。 如果您只想旋转图像,则可能不需要整个 raphaeljs 库。在这种情况下,您应该查看规范:w3.org/TR/SVG11

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

关于javascript - 为所有主流浏览器创建 css3 无限旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10750673/

相关文章:

javascript - 如何使一个元素从不是 $this 的另一个元素移动

javascript - 我如何对 Zapier 进行编码以跟踪电子邮件中提供的链接?

javascript - 可从缓存离线使用的 Web 应用程序

java - 打开新页面,在GWT中反序列化对象

java - 一对多关系 JPA/Hibernate 删除链接

java - Eclipse : File ->Import->Existing Projects into Workspace 无响应

javascript 打印操作 - 打印日期/url

javascript - 如何在ajax中将上下文传递给done

javascript - 如何在Phaser3中添加Lottie动画?

flutter snackbar 动画和滑动