37

有没有人有关于如何提高 CSS3 动画流畅度的秘籍或技巧？我正在使用 css 过渡将整个页面向左滑动，这比我想要的要复杂一些。它是一个单一元素，但它包含许多圆角、渐变、阴影等，因为它是一个复杂的页面。

在 flash actionscript 中，有一个方便的属性cacheAsBitmap可以在动画开始之前将动画元素转换为位图。这是天赐之物，可以显着加快某些类型的动画。CSS有这样的东西吗？是否还有其他技巧可以在不简化页面设计的情况下提高性能？我正在考虑启用硬件加速或将动画标记为浏览器的高优先级。

4

4 回答 4

41

在指令之前，will-change您不能以与其他语言相同的字面方式执行此操作。浏览器（或者至少是 Webkit）通过绘制不同的层来处理页面的渲染。从理论上讲，它应该足够智能，可以为您计算出层，但有时将某些东西强制到自己的层中是个好主意。

有时这有效，有时无效，具体取决于发生了什么。

反正。

在 CSS 中，将某些东西强制放入图层的一种方法是使用 3D 变换对其进行变换。一个常见的策略是添加：

transform: translateZ(0);

或等价物：

transform: translate3d(0,0,0);

或者有点疯狂：

transform: rotateZ(360deg);

或翻译的结合：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

如果事情是闪烁的。

这些创建了一个新层，因为这是规范定义的。来自http://www.w3.org/TR/css3-transforms/#transform-property，

“除了‘none’之外的任何转换值都会导致堆叠上下文和包含块的创建。”

这些都需要仔细测试，而不是总是在任何可能需要它的东西上塞进去——有时它更好，有时它没有什么不同，有时它更糟！

祝你好运！

于 2012-09-28T15:58:47.483 回答
32

自从

  • 铬 36
  • 火狐 38
  • 歌剧 30
  • 安卓浏览器 40
  • 适用于 Android 42 的 Chrome

您可以使用will-change通知浏览器为硬件加速元素做准备。

.drawer {
    will-change: transform;
}

该will-change属性允许您提前通知浏览器您可能对元素进行哪些类型的更改，以便它可以在需要之前设置适当的优化，从而避免不小的启动成本这可能会对页面的响应能力产生负面影响。可以更快地更改和渲染元素，并且页面将能够快速更新，从而带来更流畅的体验。

有关更多信息，您可以阅读该报价的全文。

于 2015-07-21T12:20:27.680 回答
5

不幸的是，这受到许多事情的限制，其中许多是您无法控制的：

  • 浏览器性能 - 所有浏览器在使用 CSS3 和 Javascript 时表现不同。我发现 Safari 在 CSS3 渲染性能方面名列前茅（令人惊讶？），Chrome 排在第二位，Firefox 排在第三位。
  • GPU 性能 - 一些浏览器现在将动画和过渡操作卸载到 GPU，在这种情况下，速度/性能受到 GPU 的限制。如果您使用的是集成 Intel GPU，与独立的 NVIDIA 或 AMD 显卡相比，它不太可能非常流畅。
  • CPU 性能 - 对于浏览器不卸载到 GPU 的情况，将使用 CPU，在这种情况下，您的 CPU 会成为瓶颈。
  • 打开的其他选项卡/窗口的数量 - 许多浏览器跨选项卡共享进程，其他选项卡/浏览器中发生的其他动画或 CPU 消耗操作可能会导致性能下降。

目前提高性能的最佳方法是限制一次动画/过渡的事物的数量。

于 2012-09-28T16:04:42.770 回答
5

根据我的阅读，阴影是目前最大的性能影响之一。您可以尝试在动画的开始/结束时添加/删除一个类，以暂时禁用所有阴影，并在移动后将它们淡入。

于 2012-09-28T16:01:46.057 回答