移动端keyframes动画效果卡顿

Question

如题，在比较低端的手机上，存在严重的卡顿现象。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; }
}

小弟动画小白，请问如何解决？

Answer 1

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

Answer 2

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

Answer 3

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

原回答：

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

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

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

Answer 4

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

Answer 5

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