CSS动画vs JQuery动画 [英] CSS Animations vs JQuery Animations

问题描述

我几乎总是使用JQuery动画为我工作的任何Web项目，但我想知道CSS动画是如何不同。我知道语法是不同的（显然），但CSS动画的一些功能，JQuery没有，反之亦然。每个人的利弊是什么？有没有更好的功能？

I almost always use JQuery animations for any web projects I work on, but I was wondering how CSS animations are different. I know the syntax is different (obviously), but what are some features that CSS animations has that JQuery doesn't and vice versa. What are the pros and cons of each? Does one have better functionality? How efficient is each?

推荐答案

CSS3动画效果与JavaScript竞争，但不一定优越。
此页面可让您测试多种浏览器动画技术，并查看实际差异。

CSS3 animation performance is competitive with JavaScript, but not necessarily superior. This page lets you test multiple browser animation techniques and see the actual differences.

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

CSS3动画在单独的线程中运行，而不是JavaScript ，所以其非常无阻塞。
所以CSS3是最好的，如果你的应用程序有一些负载。

CSS3 animations run in a separate thread than JavaScript, so its very non-blocking. So CSS3 is best if your application has some load to it.

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

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

CSS3 animations are also often hardware accelerated (the animation runs on the GPU instead of the CPU boosting performance). But so are many JavaScript animation tools.

基本上是技术上的。编码风格明智，他们也有一些大的区别。 CSS3动画的触发通常是通过从JavaScript中添加和删除dom类。所以你的组件的行为最终生活在2个文件和2种语言之间。这可以解决所有问题，但它可以使代码更难理性。

Thats basically it technically. Coding style wise, they have some big differences too. The triggering of CSS3 animations is generally through the adding and removing of dom classes from JavaScript. So the behavior of your component ends up living between 2 files and in 2 languages. This can all be worked around, but it can make code harder to reason about.

所以如果你选择使用CSS3动画，我建议不要这样做在CSS，但使用JavaScript库，让您在JavaScript中存储您的CSS3动画。或者你可以选择一个只有JavaScript的动画库，如GreenSock。无论哪种方式，我建议在JavaScript中存储动画，以便工作流程和简单的理解。

So if you choose to go with CSS3 animations, I recommend not doing so in css, but using a JavaScript library that lets you store your CSS3 animations in JavaScript. Or you can choose a JavaScript only animation library like GreenSock. Either way I recommend storing animations in JavaScript for workflow and simplicity of understanding.

这篇关于CSS动画vs JQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！