使用jQuery fadeIn或CSS3动画更好吗？

我正在使用一些PHP和JavaScript创建一个简单的库，我正在尝试在图像之间进行淡入淡出过渡。 然后我想知道使用CSS动画之间是否存在性能差异，例如：

@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 

和一个jQuery淡入淡出。

我想使用fadeIn的回调，但我也可以使用带有CSS的计时器。

对于大图像，这些中的任何一个都可能更好吗？ 我看不出有什么不同，但想知道它是否会影响较慢的计算机。

Answer 1

那个回退到另一个怎么样？ 尽可能使用CSS3过渡，并使用诸如Modernizr之类的function检测库来确定用户的浏览器是否能够进行CSS3过渡。

如果只有用户的浏览器不支持本机动画，那么只有你应该使用jQuery。

原生动画是GPU加速的，从而减少了对CPU的约束，并使动画更加流畅。 此外，它不需要JAVASCRIPT，也不需要额外的请求。

Answer 2

好吧，我认为当有支持的浏览器时，使用CSS动画要好得多，你应该只使用jQuery作为不支持的浏览器的备份。 正如http://dev.opera.com/articles/view/css3-vs-jquery-animations中详细解释的那样，他们同时使用CSS和jQuery对300个div进行了动画测试，并注意到它们之间的巨大差异。表现统计。

使用CSS动画的统计数据是：

– 完成动画所执行的操作数：100
– 完成动画执行所需的时间：2.9秒
– 动画结束时消耗的内存：1.5 MB

和使用jQuery的统计信息是：

– 完成动画所执行的操作数：2119
– 完成动画执行所需的时间：5秒
– 动画结束时消耗的内存：6 MB

因此，正如您所看到的，性能之间存在很大差异。 这是因为浏览器的CSS处理器是用C ++编写的，本机代码执行得非常快，而jQuery（JavaScript）是一种解释型语言，浏览器无法及时预测JavaScript，就接下来会发生什么事件而言，限制浏览器优化它以提高性能。 我希望能回答你的问题。