使用Javascript或CSS3制作动画？

Question

我一直想知道在性能方面对动画有什么好处 - Javascript或CSS3。 在这个页面上，您可以在GSAP，jQuery和CSS3之间进行比较：

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

向下滚动到性能比较。 现在我的问题如下：

CSS3迟早会比Javascript更快（在这种情况下是GSAP）吗？ 那么我们应该使用CSS3编程动画还是使用Javascript编程动画？

更新：另一个网站：

http://greensock.com/transitions/

从现在看来，GSAP在大多数方面比CSS3更快，但在3D转换中CSS3更快。

现在的问题仍然是：CSS3会比GSAP（或其他类似的框架）更快吗？

Answer 1

这是动画如何工作的近似值：

• CSS3：“请尽可能顺利地过渡到这一点。”

• JavaScript（天真）：“好的，所以首先你搬到这里 ，然后你搬到这里 ，然后在这里 ......你跟上了吗？” [浏览器：]“让你心烦意乱！”

• JavaScript（delta计时）：“好的，搬到这里 。该死的，你很慢。好吧，搬到这里看看你好像没有落后。”

• jQuery：“我不在乎它是怎么做的，只要这样做。再见！”

在我看来，获胜者是CSS3。

Answer 2

CSS3动画比JavaScript动画更快更流畅，因为它们可以通过浏览器/ GPU进行优化并可能加速硬件加速。 另一方面，JS动画通常不太流畅，因为动画的每个帧都必须被显式解释为渲染。

此外，JS动画主要用于不支持CSS3的旧版浏览器，后者相对较新。

Answer 3

似乎只有四个 css属性可以获得真正的硬件加速，正如Paul Lewis和Paul Irish在这里解释的那样： http ： //www.html5rocks.com/en/tutorials/speed/high-performance-animations/ （非常有趣的阅读！ ）。 它们是： 位置，比例，旋转和不透明度所有其他css属性在大多数浏览器中都没有，因此可能很慢。

所以，是的，一些CSS动画已经非常流畅，其余的将会更快。 特别是在移动设备上。 （其他答案中的技术更多）

但不久之后，像GSAP和jQuery这样的库（无论如何）都会改变他们的动画方法。 他们甚至可以选择更快的方法，具体取决于运行站点的设备。

（例如：您已经可以使用jQuery的转接插件来使用jQuery的CSS3动画.http ：//ricostacruz.com/jquery.transit/ ）

所以：

CSS3会比Javascript更快吗？

是。 但：

我们应该用CSS3编程动画还是用Javascript编程动画？

这是一个不同的故事，取决于您的需求。

如果你使用不透明度动画一个小悬停效果：CSS3是你的方式。 简单，干净，快速。

对于复杂的动画，不同的交互等，您将需要使用JS，这也为您提供了以后选择动画方法的灵活性。 特别是GSAP非常强大且易于编写。