blocks|key|3089347|text|通常的经验法则是，只要JavaScript+可以避免，并获得相同的结果，它就应该避免。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3089348|它总是更喜欢使用原生浏览器的功能，因为它通常会在性能方面更好，而且通常看起来会更好。|3089349|附加点：|3089350|3089351|jQuery动画不是真正的动画，它们是伪造的，而原生CSS3浏览器动画实际上是动画。因此，GPU可以加速原生CSS3动画，而jQuery动画则不能。|unordered-list-item|3089352|注意到，并不是所有浏览器都支持CSS3动画/过渡。您可能希望使用test+if+the+browser+supports+it，并相应地执行操作。|3089353|3089354|entityMap|0|LINK|mutability|MUTABLE|url|http://www.modernizr.com/^0|M|4|11|5|0|0|0|0|0|W|V|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|16|8|@]|D|@]|E|$]]|$1|N|3|O|5|M|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|P|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

As a general rule of thumb, whenever JavaScript can be avoided and the same result achieved, it should be avoided.

It's always preferred to use the native browser abilities as it will usually be better performance-wise, plus it will generally look better.

<h2>Additional points:</h2>

<ul>
<li>jQuery animations are not real animations, they are faked, while the native CSS3 browser animations are in fact, animations. As a result native CSS3 animations can be accelerated by the GPU, whereas jQuery animations cannot.</li>
<li>Do note that not all browsers support CSS3 animations/transitions. You would probably want to <a href="http://www.modernizr.com/" rel="nofollow" title="Feature Detection">test if the browser supports it</a>, and act accordingly.</li>
</ul>

blocks|key|773943|text|CSS动画具有潜在的硬件加速优势。这里有一个Scripty2的演示(我知道，它不是jQuery+-但原理相同)，它很好地演示了这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|773944|http://scripty2.com/hardware-acceleration/|offset|length|773945|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

CSS animations have the benefit of potentially being hardware accelerated. Here's a demo of Scripty2 (I know, it's not jQuery - but same principles) that demonstrates this very well.

<a href="http://scripty2.com/hardware-acceleration/" rel="nofollow">http://scripty2.com/hardware-acceleration/</a>

blocks|key|4987920|text|css动画可以通过GPU加速，而Javascript动画则不能。如果你毫无疑问地知道你的用户群会支持你的动画的CSS版本，那么选择css是很有意义的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4987921|如果您需要支持较旧的浏览器，javascript是正确的选择。|4987922|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

CSS animations can be accelerated by the GPU, whereas Javascript animations aren't. If You know without a doubt that your user base will have support for the css version of your animations, it makes a lot of sense to choose css.

In the case that you need to support older browsers, javascript is the right call.

blocks|key|4987946|text|对于所有认为Javascript更适合较老的浏览器的人来说，这不一定是真的。考虑到Andy+Clarke对此的看法，使用可靠的语义标记和CSS3似乎更容易通过良好的、可访问的回退来讲述一个优雅的故事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4987947|http://forabeautifulweb.com/blog/about/its_a_mad_mad_mad_mad_manimation/|offset|length|4987948|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|20|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

To all the people who think Javascript is better for browsers that are older, that's not necessarily true. Thinking about Andy Clarke's take on this, it seems like it's easier to tell an elegant story with good, accessible fallbacks using solid semantic markup and CSS3 than it is with Javascript.

<a href="http://forabeautifulweb.com/blog/about/its_a_mad_mad_mad_mad_manimation/" rel="nofollow">http://forabeautifulweb.com/blog/about/its_a_mad_mad_mad_mad_manimation/</a>

blocks|key|4704837|text|但并不是每个浏览器都支持css动画，这是一个重要的问题，这取决于你的公众。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4704838|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|$]]

But css animation are not suported by every browser, it's an important issue depending of your public.

blocks|key|3089538|text|最大的优势是，由于硬件加速，它在iPad，iPhone，Android以及Safari+mac上都能非常流畅地工作。jquery动画在移动设备上并不流畅。在未来，CSS动画将变得非常流畅，因为它们是标准的，但jquery将保持不变。这是未来使用这些的更多证据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3089539|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|$]]

the best advantage is that it works very smoothly in iPad, iPhone, Android as well as in Safari mac due to hardware acceleration. jquery animations are not smooth on mobile devices. In future CSS animations would get buttery smooth as they are standard but jquery would remain the same. It is more future proof to use these

I mean,
CSS animations are cool, but CSS3 compliance is annoyingly un-standard.
but, ignoring all the issues with browsers and their inability to be up-to-date with the latest W3C,

Is there some sort of performance advantage over jQuery animations?

Why are they being implemented?

Is there any advantage to using CSS animations over jQuery animations? (performance, or otherwise)

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

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

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

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

我的意思是，CSS动画很酷，但CSS3兼容是恼人的不标准。但是，忽略浏览器的所有问题以及它们无法与最新的W3C保持同步，与jQuery动画相比，是否有某种性能优势？为什么要实施它们？

问使用CSS动画比使用jQuery动画有什么优势吗？(性能或其他)
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS动画比使用jQuery动画有什么优势吗？(性能或其他)EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS动画比使用jQuery动画有什么优势吗？(性能或其他)
EN