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

前端之家收集整理的这篇文章主要介绍了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渲染动画.

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

猜你在找的CSS相关文章