css3 animation 逐帧动画 雪碧图问题？

Question

最开始利用

.ani{
    width: 66816px; 
    height: 768px; 
    background: url("/static/img/winSprite.png") 0 0 no-repeat; 
    background-size: 66816px 768px;
    animation: step 3s steps(87) infinite; 
}
@keyframes step {
   100% {
    background-position: 0 -66816px;
  }
}

实现一个序列帧动画，87张768x768的图片合成一张横着的长图
在PC上感觉没什么问题，放到手机上，结果很卡顿
了解到是图片太大，超过2048*2048移动端渲染会有问题

所以把图片缩小到256x256的规格，但还是超过了

有什么好的解决方案吗？ 已经减过帧了 不能再减了

Answer 1

之前整理过这类问题，请先参考： https://zhuanlan.zhihu.com/p/...

(主要就是尝试用canvas并且我写了一个简单的工具...)

如果还有问题，也欢迎进一步交流。