使用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：＆＃34;请尽可能顺利地过渡。＆＃34;

• JavaScript（天真）：＆＃34;好的，首先你移动这里，然后你移动这里，然后移动这里 ...你跟上了吗？＆＃34; [浏览器：]＆＃34;让你明白！＆＃34;

• JavaScript（增量计时）：＆＃34;好的，移动这里。该死，你慢了。好的，移到这里所以看起来你不会落后。＆＃34;

• jQuery：＆＃34;我不关心它是如何完成的，只是这样做。再见＆＃34;！

在我看来，获胜者是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非常强大且易于编写。