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

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

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

还有一个jqueryfadein

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

---

这两种方法中的任何一种都能更好地处理大型图像吗？我看不出有什么不同，但我想知道这是否会影响速度较慢的计算机。

一台有后备能力，另一台如何？尽可能使用CSS3转换，并使用功能检测库（如Modernizer）确定用户的浏览器是否能够进行CSS3转换

如果且仅当用户的浏览器不支持本机动画时，才应使用jQuery

---

本机动画是GPU加速的，因此CPU上的约束更少，动画更平滑。此外，它不需要JAVASCRIPT，也不需要额外的请求

好吧，我认为当有受支持的浏览器时，使用CSS动画要好得多，您应该只使用jQuery作为不受支持浏览器的备份。正如上面详细解释的，他们同时使用CSS和jQuery对300个div进行了动画测试，并注意到性能统计数据之间存在巨大差异

使用CSS统计的动画包括：

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

使用jQuery的统计数据为：

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

因此，正如您所看到的，性能之间存在很大的差异。这是因为浏览器的CSS处理器是用C++编写的，而本地代码执行得非常快，而JQuery（JavaScript）是一种解释性语言，浏览器不能很好地预测JavaScript的时间，接下来将发生什么，这就限制了浏览器优化它的性能。

---

我希望能回答你的问题。

对于更好的跨浏览器兼容性，也考虑使用不前缀和<代码> -MOZ-< /代码>等版本的代码。当然，我只是在这里使用WebKIT使代码在帖子中变短。谢谢你的提醒；p@mgraph-jQuery可能支持IE淡入淡出，但很多时候它看起来很糟糕，因为无论jQuery有多好，它都无法隐藏IE的基本限制。如果浏览器不支持本地动画，那么就不要制作动画，因为它们看起来像垃圾：）4个答案，其中3个少于-4？！我会说这是一个非常好的问题！CSS3看起来是干净动画代码的正确位置，但许多统计数据证明，在性能方面，有时你是错的。@netAction我不熟悉jQuery优于本机CSS动画的情况。