blocks|key|2843032|text|根据的说法，jQuery动画比css动画慢得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2843033|原因可能是因为jquery必须使用计时器和循环来修改DOM元素的属性。CSS是浏览器引擎的一部分。这在很大程度上取决于系统的硬件。你也可以在Chrome或Firefox的分析中检查这一点。|offset|length|style|BOLD|2843034|entityMap^0|0|0|2|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

According to <a href="http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/">this link</a>, jQuery animation is much slower then css animation.

Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox.

blocks|key|2756852|text|CSS动画几乎总是更快。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756853|CSS转换和|2756854|动画的正面比较。不是设置计时器重复运行，而是由浏览器本机处理转换。在我相当不科学的测试中，转换总是更快，以更高的帧率运行，特别是在元素数量较多的情况下。它们还有一个优点，那就是颜色可以很容易地动画化，而不是依赖于插件。|blockquote|2756855|2756856|2756857|http://css.dzone.com/articles/css3-transitions-vs-jquery|offset|length|2756858|相关问题：Performance+of+CSS+Transitions+vs.+JS+animation+packages|2756859|entityMap|0|LINK|mutability|MUTABLE|url|1|https://stackoverflow.com/questions/2999749/performance-of-css-transitions-vs-js-animation-packages^0|0|0|0|0|0|0|1K|0|0|5|1K|1|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@$K|13|L|14|1|15]]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@$K|17|L|18|1|19]]|A|$]]|$1|O|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|J]]|V|$5|R|S|T|A|$U|W]]]]

CSS animations will almost always be faster.

<blockquote>
 A head to head comparison of CSS transitions and jQuery's animate.
 Rather than setting a timer to run repeatedly, transitions are handled
 natively by the browser. In my rather unscientific testing,
 transitions are always quicker, running with a higher frame rate,
 especially with high numbers of elements. They also have the advantage
 that colours can be animated easily, rather than having to rely on
 plugins.
</blockquote>

<a href="http://css.dzone.com/articles/css3-transitions-vs-jquery" rel="nofollow noreferrer">http://css.dzone.com/articles/css3-transitions-vs-jquery</a>

Related Question:
<a href="https://stackoverflow.com/questions/2999749/performance-of-css-transitions-vs-js-animation-packages">Performance of CSS Transitions vs. JS animation packages</a>

blocks|key|2756883|text|CSS3转换应该更快，因为它们是浏览器原生的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756884|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

CSS3 Transitions should be faster because they are native to the browser.

blocks|key|2843200|text|它的css3速度更快，消耗的内存更少，而且更平滑。CSS处理器是用C%2B%2B编写的，原生代码执行速度非常快，而jQuery+(+JavaScript+)是一种解释型语言，浏览器不能及时预测JavaScript。http://dev.opera.com/articles/view/css3-vs-jquery-animations/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2843201|查看上面的链接，了解通过CSS3与jQuery进行的实验|2843202|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.opera.com/articles/view/css3-vs-jquery-animations/^0|2V|1P|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Its css3 its faster and consumes lesser memory and is smoother.
CSS processor is written in C++ and native code executes very fast whereas jQuery (JavaScript) is an interpreted language and the browser can't predict JavaScript ahead in time.
<a href="http://dev.opera.com/articles/view/css3-vs-jquery-animations/" rel="nofollow">http://dev.opera.com/articles/view/css3-vs-jquery-animations/</a>

View the above link to know about the experiments held over CSS3 vs jQuery

blocks|key|2757169|text|This+article+(http://css-tricks.com/myth-busting-css-animations-vs-javascript/)很好地比较了CSS变换、jQuery动画和GSAP+(另一个JavaScript库)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2757170|2757171|+CSS动画比jQuery快得多。然而，在我测试的大多数设备和浏览器上，基于JavaScript的GSAP甚至比CSS动画表现得更好|blockquote|2757172|2757173|2757174|因此，CSS变换比jQuery动画快，但不要让这让你认为CSS变换比JavaScript快。GSAP表明，JavaScript的性能优于CSS。|style|BOLD|2757175|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/myth-busting-css-animations-vs-javascript/^0|0|27|0|0|0|0|0|0|3|E|1H|I|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|10|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|13|8|@$A|14|B|15|L|M]|$A|16|B|17|L|M]]|9|@]|C|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<a href="http://css-tricks.com/myth-busting-css-animations-vs-javascript/" rel="nofollow">This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/)</a> does an excellent comparison of CSS transforms vs. jQuery animations vs. GSAP (another JavaScript library).

<blockquote>
 CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations
</blockquote>

So CSS transforms are faster than jQuery animations, but don't let this make you assume that CSS transforms are faster than JavaScript. GSAP shows that JavaScript can outperform CSS.

blocks|key|2843109|text|CSS3会更快，因为它是浏览器的标准，因为JQuery是另一个必须加载的文件，但是我发现根据动画，JQuery可以运行得更流畅。有时，偶尔尝试纯Javascript也是很好的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2843110|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

CSS3 will be faster as it comes standard with the browser where as JQuery is another file that has to be loaded, however I have found that depending on the animation that JQuery can run a lot smoother. Sometimes it's also nice to experiment with pure Javascript now and again.

blocks|key|1118536|text|The+Mozilla+developer+documentation+raises+some+interesting+points+regarding+CSS3+animation|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1118537|允许浏览器控制动画序列的|1118538|允许浏览器优化性能和效率，例如，通过减少在当前不可见的选项卡中运行的动画的更新频率。|blockquote|1118539|1118540|1118541|WebKit+(which+powered+Safari)+also+makes+use+of+hardware+accelerated+compositing，它对性能的影响比Javascript目前所能做的任何事情都要大得多。(我认为这将很快改变，尽管添加了更多的功能来管理计算)这是因为它将利用专用硬件，如果它可以执行计算，而不是通过翻译的语言，如Javascript。|1118542|我不能100%25确定iPad上的WebKit是否是硬件加速的；但是，不言而喻，因为它是标准化的，并且越来越受欢迎，所以这只会随着时间的推移而改善。|1118543|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/CSS/CSS_animations|1|http://trac.webkit.org/wiki/QtWebKitGraphics#Acceleratedcompositing^0|4|2F|0|0|0|0|0|0|0|28|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|14|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|15|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

The <a href="https://developer.mozilla.org/en/CSS/CSS_animations" rel="nofollow">Mozilla developer documentation raises some interesting points regarding CSS3 animation</a>:

<blockquote>
 Letting the browser control the animation sequence lets the browser
 optimize performance and efficiency by, for example, reducing the
 update frequency of animations running in tabs that aren't currently
 visible.
</blockquote>

<a href="http://trac.webkit.org/wiki/QtWebKitGraphics#Acceleratedcompositing" rel="nofollow">WebKit (which powered Safari) also makes use of hardware accelerated compositing</a>, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.

I am not 100% certain whether WebKit on the iPad is hardware accelerated; however it would stand to reason that because it is standardized and increasing in popularity, that this would only improve with time.

blocks|key|1118621|text|来自here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1118622|CSS转换和|1118623|动画的正面比较。不是设置计时器重复运行，而是由浏览器本机处理转换。在我相当不科学的测试中，转换总是更快，以更高的帧率运行，特别是在元素数量较多的情况下。它们还有一个优点，那就是颜色可以很容易地动画化，而不是依赖于插件。|blockquote|1118624|1118625|1118626|一个测试here和这个结论。|1118627|基于计时器的|1118628|+Javascript动画永远不会像本地动画那样快，因为它们无法访问足够多的浏览器来进行同样的优化。这些动画只能在传统浏览器中用作后备。|1118629|1118630|1118631|还要注意this，|1118632|1118633|+CSS3动画效果很好，但它确实占用了大量的处理器资源。无法像使用jQuery这样的框架那样使用CSS3对动画进行微调。所以，只要CSS3动画不是CPU友好的，你最好坚持使用jQuery。|1118634|1118635|entityMap|0|LINK|mutability|MUTABLE|url|http://css.dzone.com/articles/css3-transitions-vs-jquery/|1|http://css3.bradshawenterprises.com/demos/speed.php/|2|http://www.richardet-design.com/wp/design/webdesign/css3-animation-vs-jquery-animation/^0|2|4|0|0|0|0|0|0|4|4|1|0|0|0|0|0|4|4|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1F|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|M|3|N|5|6|7|1M|8|@]|9|@]|C|$]]|$1|O|3|P|5|H|7|1N|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1Q|8|@]|9|@$A|1R|B|1S|1|1T]]|C|$]]|$1|U|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]|$1|V|3|W|5|H|7|1V|8|@]|9|@]|C|$]]|$1|X|3|-4|5|6|7|1W|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|11|12|13|C|$14|17]]|18|$5|11|12|13|C|$14|19]]]]

From <a href="http://css.dzone.com/articles/css3-transitions-vs-jquery/" rel="nofollow">here</a>

<blockquote>
 A head to head comparison of CSS transitions and jQuery's animate.
 Rather than setting a timer to run repeatedly, transitions are handled natively
 by the browser. 
 In my rather unscientific testing, transitions are always quicker, running with a
 higher frame rate, especially with high numbers of elements. They also have the
 advantage that colours can be animated easily, rather than having to rely on 
 plugins.
</blockquote>

A test <a href="http://css3.bradshawenterprises.com/demos/speed.php/" rel="nofollow">here</a> along with this conclusion.

<blockquote>
 Javascript animations based on timers can never be as quick as native
 animations,
 as they don't have access to enough of browser to make the same optimisations.
 These animations should be used as a fallback only in legacy browsers.
</blockquote>

Also notice <a href="http://www.richardet-design.com/wp/design/webdesign/css3-animation-vs-jquery-animation/" rel="nofollow">this</a>,

<blockquote>
 CSS3 animations are terriffic but do use a lot of your processor’s
 power. 
 There is no way to fine tune the animation with CSS3 the same way you can using a
 framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you
 better stick with jQuery.
</blockquote>

blocks|key|2843165|text|如果您正在使用带有canvas标记的jQuery/javascript动画(如果我没有记错的话，它仍然依赖于计时器...使用它的新手)，那么它将为您提供使用javascript进行硬件加速的优势。如果你只是想在鼠标悬停的时候移动一些东西，那么过渡效果很好。CSS过渡可能会运行得更流畅一点，但这是一种权衡，你通过使用过渡放弃了大量的javascript对动画的控制。我喜欢在CSS中保持样式，在JS中保持行为--这不是应该如何工作的吗？CSS转换打破了这一逻辑……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2843166|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you're using jQuery/javascript animation with the canvas tag (which if I'm not mistaken still relies upon a timer... new to playing around with it though), then it gives you the advantage of hardware acceleration with javascript. If you're just looking to move something around when you hover then transitions work great. CSS transitions may run a little smoother but it's a trade off, you're relinquishing a ton of javascript control over the animation by using transitions. I like to keep style in CSS and behavior in JS - isn't that how it's supposed to work anyway? CSS transitions kind of broke that logic...

blocks|key|2843255|text|Native应该更快，但如果浏览器开发人员草率(或懒惰)，他们会编写糟糕的代码，这会导致CSS动画(或过渡)的效果很差。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2843256|如今，jQuery有了一个插件，它用一个“改进”的插件取代了“动画”功能。参见Velocity。我不会讨论用javascript动画DOM的其他方法，因为这超出了这个问题的范围。|offset|length|2843257|因此，就目前而言，jQuery比CSS慢。而且，CSS更容易编写，因为你可能已经有了元素样式，所以添加一些规则很容易，与你需要在某个地方开始编写JS并管理复杂、繁重的it..but的情况相比，JS更快，可悲的是。|2843258|关于这个问题的一篇非常好的文章--+http://davidwalsh.name/css-js-animation|2843259|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/improving-ui-animation-workflow-velocity-js/|1|http://davidwalsh.name/css-js-animation^0|0|13|8|0|0|0|I|13|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

Native is supposed to be faster, but if browser developers are sloppy (or lazy), they write bad code, which leads to poor results with CSS animations (or transitions). 

Nowadays, jQuery has a plugin which overides the "animation" function with an "improved" one. see <a href="http://css-tricks.com/improving-ui-animation-workflow-velocity-js/" rel="nofollow">Velocity</a>. I'm not getting into other ways to animate the DOM with javascript because it's outside the scope of this question.

So, as-is, jQuery is slower than CSS. also, CSS is easier to write because you already have the element style probably, so adding a few rules is easy, compared to a situation where you need to start writing JS somewhere and manage it..but for complex, heavy stuff, JS is faster, sadly.

A very good article about this exact question - <a href="http://davidwalsh.name/css-js-animation" rel="nofollow">http://davidwalsh.name/css-js-animation</a>

I'm working on an iPad HTML5 app and I've already implemented ontouch support to trigger events faster and I'm using jQuery to target the elements easier, but for the animations I'm using CSS3 transitions

What do you think is faster? using jQuery animations since I already have imported the library or use CSS3 transitions when targeting elements with jQuery?

what's faster? CSS3 transitions or jQuery animations?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在开发一个iPad HTML5应用程序，我已经实现了ontouch支持，可以更快地触发事件，并且我使用jQuery来更容易地定位元素，但对于动画，我使用CSS3转换你认为哪种方式更快？使用jQuery动画，因为我已经导入了库，或者在使用jQuery定位元素时使用CSS3过渡？

问哪个更快？CSS3过渡还是jQuery动画？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问哪个更快？CSS3过渡还是jQuery动画？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问哪个更快？CSS3过渡还是jQuery动画？
EN