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

Question

我正在制作翻页动画.表现令人失望.特别是如果你pages上课并使它像800px宽(粘贴$('.pages').css({width: '960px', height: '600px'});到你的控制台).我曾经一次运行大约16个转换并将其减少到9,其中许多是转换!我不知道还能做些什么.

Chrome似乎没有使用GPU.它在初始页面转弯处激活FPS,但随后定期下降(启用此功能about:flags):

在Safari中尝试一下,你会获得更好的性能,但看到动画不同步,往往落后于对方,并且RománCortés 的项目在同一浏览器中也遭受了一种奇怪的摇摆不定(我还没有做到在Fx工作).

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

Answer 1

这是我为推出 Sencha Animator所做的翻页。据我所知，它的灵感也来自 Ramon Cortes 的原作，但使用了不同的机制。在 Safari 和 iOS 上非常流畅，但在 Chrome 桌面上有点不稳定。不过还没有在 Android 4 中检查过。