CSS 动画与 JQuery 动画

Posted 2023-03-06

【中文标题】CSS 动画与 JQuery 动画

【英文标题】：CSS Animations vs JQuery Animations

【发布时间】：2015-01-21 13:26:42

【问题描述】：

我几乎总是在我从事的任何 Web 项目中使用 JQuery 动画，但我想知道 CSS 动画有何不同。我知道语法不同（显然），但是 CSS 动画有哪些 JQuery 没有的功能，反之亦然。各自的优缺点是什么？有更好的功能吗？各自的效率如何？

【参考方案1】：

我认为主要的优点是 CSS 动画是原生的。这意味着他们将在浏览器中调用编译后的代码，并且可能会使用任何可用的硬件加速。这意味着 CSS3 动画将更快并且使用更少的内存。

这里有一篇来自 Opera 浏览器开发者的有趣帖子：https://dev.opera.com/articles/css3-vs-jquery-animations/

【参考方案2】：

CSS3 动画性能可与 javascript 相媲美，但不一定更胜一筹。 此页面可让您测试多种浏览器动画技术并查看实际差异。

https://greensock.com/js/speed.html

CSS3 动画在与 JavaScript 不同的线程中运行，因此它非常无阻塞。 因此，如果您的应用程序有一些负载，CSS3 是最好的。

http://www.phpied.com/css-animations-off-the-ui-thread/

CSS3 动画通常也是硬件加速的（动画在 GPU 上运行，而不是 CPU 提升性能）。但是很多 JavaScript 动画工具也是如此。

技术上基本上就是这样。明智的编码风格，它们也有一些很大的不同。 CSS3 动画的触发一般是通过在 JavaScript 中添加和删除 dom 类来实现的。因此，您的组件的行为最终会存在于 2 个文件和 2 种语言之间。这一切都可以解决，但它会使代码更难推理。

因此，如果您选择使用 CSS3 动画，我建议您不要在 css 中这样做，而是使用一个 JavaScript 库，让您可以将 CSS3 动画存储在 JavaScript 中。或者你可以选择一个只有 JavaScript 的动画库，比如 GreenSock。无论哪种方式，我都建议将动画存储在 JavaScript 中，以简化工作流程和理解。