13

每次我访问带有 CSS3 动画的页面时，我的笔记本都会变得嘈杂（给我一个信号，表明它在那里做了一些繁重的工作）。如果至少生成的动画足够流畅，我不会在意自己。但他们不是。我的 2.4 GHz Core 2 Duo 配备 8GB RAM 和专用 NVIDIA GeForce 320M（不多，但对于某些 css 来说应该足够了，不是吗？...）在某些情况下，我得到的结果是一些生涩的、随机闪烁的有奇怪的工件......“动画”，通常比它的 JS 等价物更糟糕......

有没有人比较过 JS 和 CSS 动画？或者对提议的 CSS3 好东西进行基准测试以供实际使用（例如，其中有多少可以同时出现在页面上而不会严重挂起等）？是否有任何最佳实践（例如 - 这样做，不要那样做，或者您的浏览器会抓取 - 等等）？

4

4 回答 4

18

当不支持 CSS3 时，我使用 CSS3 过渡和 Jquery .animate() 回退完成了一些项目。

除了我自己的之外，我还有三台测试计算机：

  • 6 年以上的笔记本电脑（运行 XP、Athlon 1800+ 和 768Mo 的 Ram）
  • 3 年笔记本电脑（运行 Crappy Vista 和双核 Intel CPU 和 2Go 内存）
  • 一个 franken 桌面（一些操作系统安装了 P4 和 1Go 的 ram）

我观察到大多数时候，CSS3 的表现更好。

我所说的“表现更好”的意思只是“感觉更好”：我没有尝试对性能进行基准测试，也没有应用科学的测试方法，我的观察不应该只是一种经验感。另请注意，我主要使用 CSS3 过渡而不是 CSS3 动画（即使用关键帧）。

然而，这里的“更好”并不意味着“总是好的”。在较旧的计算机上，Javascript 和 CSS3 同样滞后。如果您的网站是 JS 或 CSS3 重，版本 9 之前的 IE 总是糟糕的体验，版本 8 之前的 IE 总是一个真正的噩梦。v4 之前的 Firefox 在旧计算机上更好，但远非完美。

在所有情况下，必须正确应用 CSS3：例如，我发现将 div 淡化为 opacity: 0 而不设置 display:none 完成后总是一个坏主意... CSS3 过渡非常新，不存在真正的最佳实践，这是试用和现在的错误。

在现代移动设备上（我拥有一些 IOS、Android 和 BBOS 设备），CSS3 总是比 Javascript 好得多：在 iPad 1 上，一个简单的 $('img').fadeOut() 在 CSS3过渡很干净。

因此，总而言之，我的个人（和有限的）经验告诉我们：

  • css3 往往比 Js 好，尤其是对于现代移动设备
  • 尽管在过度使用时两者都对糟糕的计算机/浏览器组合不利
  • 像往常一样，这取决于您的用户。如果他们有最先进的 Macbook，您可以毫无顾忌地使用大量动画。如果他们装备不佳，动画可能会严重阻碍他们的浏览体验。
  • 我认为最好的方法是在不支持的情况下使用 Jquery 后备进行 CSS3 转换，并保持简单（即不要一次在三个不同元素上为四个属性设置动画）

我希望它有所帮助。

于 2011-10-23T17:07:21.163 回答
12

CSS3 在某些浏览器中使用 GPU 加速，这意味着如果您拥有出色的 GFX 卡，将产生流畅、快速的动画。CSS/JQ 在哪里使用你的记忆。

所以我真的不认为有可能进行基准测试比较。

关于你可以使用多少动画，浏览器更新如此频繁，硬件是一个因素，做这样的“使用指南”将是非常困难的。

也没有看到任何 JS :)

有关 GPU 加速的更多信息，请参阅：

http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell

虽然有一些关于这个主题的精彩文章：

http://www.netmagazine.com/opinions/css3-vs-javascript

http://www.whatcreative.co.uk/blog/tips/the-benefits-of-css3-vs-jquery/

于 2011-10-23T16:19:35.127 回答
2

在一些项目的生产环境中使用 css 动画后，我不得不说这很痛苦。

我还使用了 TweenLite，这是我之前在 Flash 中使用过的最喜欢的动画库，并且已经针对 javascript 和 CSS 进行了重写。

既然我对 html5 动画有足够的经验，我可以肯定 TweenLite 是最适合的工具。

我曾经为我的 web 开发人员使用 css 动画和过渡，并使用 TweenLite 作为旧浏览器的后备，但是当我将现代浏览器中的性能与 CSS 和 TweenLite 进行比较时，TweenLite 版本几乎总是最流畅的。

由于开发人员刚刚写的这篇文章，我运行了这些测试：

http://www.greensock.com/transitions/

GSAP 充分利用requestAnimationFrame并进行了超级优化。它具有与 css3 相当的性能和更好的 api 用于排序、控制、回调......

选择题！我做了我的。

于 2013-01-08T17:05:04.047 回答
2

这是Greensock的新内容（自 2012 年 12 月起）：http : //www.greensock.com/js/speed.html

您也可以在 jQuery、YUI、Zepto、Mootools、Dojo、TweenJS 和 GSAP 等框架上对 css3 动画和 javascript 动画进行基准测试和比较。

于 2013-02-17T09:02:45.073 回答