CSS 过渡，动画有糟糕的表现，行为答案

【问题标题】：CSS transitions, animations have terrible performance, behaviorCSS 过渡，动画有糟糕的表现，行为
【发布时间】：2011-12-13 15:00:37
【问题描述】：

I'm working on a page turn animation。表现令人失望。特别是如果您使用 pages 类并将其设置为 800px 宽（将 $('.pages').css({width: '960px', height: '600px'}); 粘贴到您的控制台中）。我曾经一次运行大约 16 个转换并将其减少到 9 个，其中许多是转换！我不知道我还能做什么。

Chrome 似乎没有使用 GPU。它会在初始翻页时使 FPS 达到峰值，但随后会定期下降（使用 about:flags 启用此功能）：

在 Safari 中尝试一下，您会获得更好的性能，但会看到动画不同步，经常相互滞后，并且在同一浏览器中 Román Cortés's project also suffered from 有一个奇怪的抖动（我没有做到还在 Fx 中工作）。

关于如何优化网络上的 CSS 过渡和动画的好材料并不多，我主要是自学。我希望有人会有这样的建议。

【问题讨论】：

标签： google-chrome css webkit

【解决方案1】：

为了利用 GPU，您必须在 -webkit-transform 中使用 translate3d(x,y,z) 而不是 translate(x,y)。这将强制 Chrome 使用 GPU 来渲染动画。

请注意，如果计算机具有良好的显卡，性能会大大提高，但在较慢的硬件上也会降低性能。

【讨论】：

谢谢，我在 Chrome/MacOS 上尝试了 translate3d，当我有 12 页有点复杂的 DOM 结构时，它的速度非常慢。在我什至没有动画之前，整个页面都慢了下来！所以不幸的是，我想不出一种方法让它在加速另一个平台的同时不削弱一个平台。

【解决方案2】：

这里是 a page flip I did，用于我们推出 Sencha Animator。它也受到 Ramon Cortes 原作的启发，但使用了不同的机制——据我所知。它在 Safari 和 iOS 上非常流畅，但在 Chrome 桌面上有点生涩。不过还没有在 Android 4 中检查过。

【讨论】：

很好，我将不得不研究这种技术，因为 Safari 似乎更喜欢它。但是，Mac 上的 Chrome 会用随机的像素块来渲染它，这些像素会随机变为黑色或显示下面的图层。
是的，显然 Chrome 15(?) 的 webkit 版本存在一个错误，即在添加转换时隐式 z 顺序会变得混乱。我将处理一个带有显式 z-index 设置的版本，看看它是否能解决问题。
我刚刚发现如果您添加-webkit-transform-style: preserve-3d，它就不会像那样闪烁。我仍然在不应该的地方得到一些剪辑。

【解决方案3】：

我在 OSX 上使用 Chrome 17，它看起来不错 - 运行速度约为 20-30fps，没有下垂或图形问题。我怀疑这只是旧 Chrome 版本的问题。

【讨论】：

【解决方案4】：

动画 box-shadows 和 -webkit-gradients 非常昂贵，请尝试暂时删除它们以查看是否可以提高性能。如果是这样，请查看如何将它们替换为图像。

【讨论】：