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

I’m working on a page turn animation.表现令人失望.特别是如果您使用页面类并使其像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过渡和动画并没有太多好的材料,我一直在教我自己.我希望有人会有这样的建议.

解决方法

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

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