使用Javascript或CSS3制作动画？

Question

我一直想知道哪个动画在性能上更好-- Javascript还是CSS3。在此页面上，您可以对GSAP、jQuery和CSS3进行比较：

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

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

CSS3迟早会比Javascript更快吗？那么我们应该用CSS3还是仍然用Javascript来编写动画呢？

更新:另一个网站：

http://greensock.com/transitions/

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

现在的问题仍然是: CSS3会比GSAP(或其他类似的框架)更快吗？

Answer 1

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

此外，JS动画主要用于不支持CSS3的旧浏览器，这是一个相对较新的浏览器。

Answer 2

以下是动画工作原理的近似值：

• CSS3：“请尽可能地平稳地过渡(幼稚)：”好的，你先搬到这里，然后搬到这里，然后再搬到这里……你跟上了吗？“浏览器：“补充你的MIND!"
• JavaScript (增量计时)：”好的，到这里来。该死，你太慢了。好的，到这里来，这样看起来你就不是lagging."
• jQuery:了。“我不在乎怎么做，只管去做。再见！”

在我看来，获胜者是CSS3。

Answer 3

似乎只有四个css属性可以获得真正的硬件加速，就像Paul Lewis和Paul爱尔兰在这里解释的那样：http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ (非常有趣的阅读！)这些是: css的位置，缩放，旋转和不透明度所有其他css属性在大多数浏览器中什么都得不到，因此可能会很慢。

所以，是的，一些CSS动画已经非常流畅了，其余的会变得更快。尤其是在移动设备上。(在其他答案中有更多的技术问题)

但不久之后，像GSAP和jQuery这样的库将(在幕后)改变他们的动画方法。他们甚至可以根据网站运行的设备选择更快的方法。

(例如:您已经可以使用jQuery的传输插件来使用jQuery中的CSS3动画。http://ricostacruz.com/jquery.transit/)

所以：

CSS3会比

更快吗？

是。但是：

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

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

如果你使用不透明度来制作一个小的悬停效果: CSS3可能是你的方式。简单，干净，快速。

对于复杂的动画、不同的交互等，您将需要使用JS，它还允许您稍后灵活地选择动画方法。尤其是GSAP是荒谬的、强大的、易于编写的。