CSS过渡，动画有可怕的表现，行为

Question

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

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

在Safari中尝试一下，你会获得更好的性能，但是看到动画没有同步，往往落后于对方，并且Román Cortés's project also suffered from在同一个浏览器中有一个奇怪的摇摆不定（我还没有它在Fx中工作了。）

关于如何在网络上优化CSS过渡和动画并没有太多好的材料，我一直在教我自己。我希望有人会有这样的建议。

Answer 1

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

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

Answer 2

这是我们推出Sencha Animator的a page flip I did。它的灵感来自拉蒙科尔特斯的原创，但使用不同的机制 - 我记得。它在Safari和iOS上非常流畅，但在Chrome桌面上有点不稳定。但是还没有在Android 4中检查过它。

Answer 3

我在OSX上使用Chrome 17，看起来很好 - 运行速度在20-30fps左右，没有浸入或图形问题。我怀疑这只是旧Chrome版本的一个问题。

Answer 4

动画框阴影和-webkit-gradient非常昂贵，请尝试暂时删除它们以查看它是否可以提高性能。如果是，请查看您可以用图像替换它们。