CSS 转换、动画的性能、行为都很糟糕
我正在制作翻页动画。表现令人失望。特别是如果您采用 pages 类并将其宽度设置为 800px 左右（粘贴 $('.pages').css({width: '960px', height: '600px'}) ; 进入您的控制台）。我曾经同时运行大约 16 个过渡，现在将其减少到 9 个，其中许多是变换！我不知道我还能做什么。
Chrome 似乎没有使用 GPU。它会在初始翻页时提高 FPS，但随后会定期下降（使用 about:flags 启用此功能）：
在 Safari 中尝试一下，您会获得更好的性能，但会发现动画不同步，经常相互滞后，并且有一种奇怪的抖动 Román Cortés 的项目在同一个浏览器中也遇到了问题（我还没有让它工作）尚未在 Fx 中）。
网络上还没有太多关于如何优化 CSS 过渡和动画的好材料，我主要是自学。我希望有人能提供这样的建议。
I'm working on a page turn animation. The performance is disappointing. Particularly if you take the pages class and make it something like 800px wide (paste $('.pages').css({width: '960px', height: '600px'}); into your console). I used to have around 16 transitions running at once and reduced it to 9, many of which are transforms! I don't know what else I can do.
Chrome does not seem to be using the GPU. It spikes the FPS on initial page turn but then dips down at regular intervals (enabled this with about:flags):
Try it out in Safari and you will get better performance but see that the animations do not sync up, often lag behind each other, and there's a weird wobblyness that Román Cortés's project also suffered from in the same browser (I haven't made it work in Fx yet).
There hasn't been much good material about how to optimize CSS transitions and animations on the web and I've been mostly teaching myself. I was hoping someone would have this kind of advice.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
为了利用 GPU，您必须在 -webkit-tranform 中使用
translate3d(x,y,z)而不是translate(x,y)。这将强制 Chrome 使用 GPU 来渲染动画。请注意，虽然如果计算机具有良好的视频卡，性能会大大提高，但在较慢的硬件上也会降低性能。
In order to take advantage of the GPU you have to use
translate3d(x,y,z)instead oftranslate(x,y)in your -webkit-tranform's. This will force Chrome to use the GPU to render the animations.Beware that while the performance will greatly increase if the computer has a good video card, it will also degrade on a slower hardware.
这是我为推出 Sencha Animator 所做的翻页。据我所知，它的灵感也来自 Ramon Cortes 的原作，但使用了不同的机制。在 Safari 和 iOS 上非常流畅，但在 Chrome 桌面上有点不稳定。不过还没有在 Android 4 中检查过。
Here's a page flip I did for our launch of Sencha Animator. It's also inspired by Ramon Cortes' original, but uses different mechanisms - as far I as remember. It's super smooth in Safari and on iOS, but kind of jerky on Chrome desktop. Haven't checked it in Android 4 yet though.
我在 OSX 上使用 Chrome 17，看起来不错 - 运行速度约为 20-30fps，没有下降或图形问题。我怀疑这只是旧版 Chrome 版本的问题。
I'm using Chrome 17 on OSX, and it seems fine - runs at around 20-30fps, no dipping or graphical issues. I suspect that this is just an issue with older Chrome builds.
对 box-shadows 和 -webkit-gradients 进行动画处理非常昂贵，请尝试暂时删除它们以查看是否可以提高性能。如果是这样，请查看如何用图像替换它们。
Animating box-shadows and -webkit-gradients is very expensive, try removing them temporarily to see if it improves performance. If it does, see what you can do to replace them with images.