使用 Javascript 或 CSS3 制作动画？答案

【问题标题】：Use Javascript or CSS3 for animations?使用 Javascript 或 CSS3 制作动画？
【发布时间】：2014-11-18 13:59:32
【问题描述】：

我一直想知道在性能方面什么对动画更好 - 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（或其他类似框架）更快吗？

【问题讨论】：

显然css的速度总是比js快，因为css是浏览器内置的库，但是如果你想要跨浏览器支持，那么js是最好的选择
查看我发布的页面。他测试了 GSAP 与 CSS3，在这一点上，它比 CSS3 快了 3 倍。
直到现在我才知道 GSAP 是什么，听起来很棒！
我敢让你从视觉上看出任何不同。

标签： javascript jquery performance css animation

【解决方案1】：

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

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

【讨论】：

这是一个更清晰的技术答案。谢谢！
你能看看我发布的页面吗？他对其进行了测试，此时 GSAP 动画比 CSS3 动画快 3 倍。或者你有你的陈述的来源吗？
CSS3 是声明式的，JS 是命令式的，这意味着它应该更快更流畅。使用 CSS3，浏览器预先知道从头到尾的所有帧，使用 JS，必须在很大程度上指示帧。如果你搜索“CSS3”和“硬件加速”，就会有文章。为了了解 GSAP 如何在 JS 中创建更流畅的动画，需要进行详细分析。如果有的话，JS 动画的帧速率至少应该等于 CSS3，尤其是最近主要 JS 引擎的性能优化优化。
我希望你明白这并不能完全回答我的问题。请阅读我帖子中的更新
当然，希望 GSAP 专家能够澄清，因为我也有兴趣。

【解决方案2】：

这是动画工作原理的近似：

CSS3：“请尽可能平滑过渡。”
JavaScript（天真）：“好的，所以首先你移动 here，然后移动 here，然后 here.. . 你跟得上吗？ [浏览器：]“下定决心！”
JavaScript（增量计时）：“好的，移动这里。该死，你太慢了。好吧，移动到这里，看起来像你”不落后。”
jQuery：“我不在乎它是怎么做的，就去做吧。再见！”

在我看来，获胜者是 CSS3。

【讨论】：

话虽如此，当您需要对渲染到画布 (WebGL) 的内容进行动画处理时，您可能会求助于 javascript/delta 计时。
@DatProgram 非常正确。在我写的这个列表中它是第二好的。由于您不能在画布元素上使用 CSS，因此它成为第一个。
不要误以为 CSS3 动画是一种完全不同的算法。它们确实具有原生代码的优势，并且可能不受 JS 引擎的单线程性影响，但它们很可能使用相同类型的帧计算逻辑（这并没有错）。基于 JS 的动画的真正挑战在于，它们必须与 javascript 中发生的所有其他事情共享时间和执行（因为单线程），因此它们并不总是能够在需要的时候执行。

【解决方案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 来编写动画？

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

如果您使用 opacity 制作一点悬停效果：CSS3 可能是您的理想之选。简单、干净、快速。

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

【讨论】：