移动端keyframes动画效果卡顿

pommy
  • 1.3k

如题,在比较低端的手机上,存在严重的卡顿现象。PC端毫无感觉。

做的一个很简单循环移动的背景图片。

代码如下:

.animate{
    -webkit-animation: reload 30s linear infinite;
    -moz-animation: reload 30s linear infinite;
    -ms-animation: reload 30s linear infinite;
    -o-animation: reload 30s linear infinite;
    animation: reload 30s linear infinite;
}
@-webkit-keyframes reload{
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@-moz-keyframes reload{
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@-o-keyframes reload{
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@-ms-keyframes reload{
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@keyframes reload{
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

小弟动画小白,请问如何解决?

回复
阅读 7k
5 个回答

试试加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
开启GPU硬件加速,一定程度上可以优化动画渲染性能。

比较低端的手机GPU不行,动画的渲染自然不行。低端手机能流畅的玩农药吗?换个中断或者高端的试一下。

royal_029
  • 826

动画实际上非常消耗性能,不只是在低端设备,即使是高端设备,使用过多,过大的图片动画也会严重影响性能。

原回答:

@keyframes本身就是CSS3属性,实际GPU渲染已经被启用了,改成transform也于事无补。

可以使用transform的3d渲染如:-webkit-transform:transition3d(0,0,0)开启GPU硬件加速模式。

请使用更小的图片【如果可能,尽量用CSS样式】,更少的元素,更简单的动画来降低性能消耗。

试着用一下 will-change属性 , 多少能有点帮助

放弃低端手机,或者在低端手机上禁用动画特效;

宣传栏