css3 animation 逐幀動(dòng)畫(huà) 雪碧圖問(wèn)題？

最開(kāi)始利用

.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;
  }
}

實(shí)現(xiàn)一個(gè)序列幀動(dòng)畫(huà)，87張768x768的圖片合成一張橫著的長(zhǎng)圖
在PC上感覺(jué)沒(méi)什么問(wèn)題，放到手機(jī)上，結(jié)果很卡頓
了解到是圖片太大，超過(guò)2048*2048移動(dòng)端渲染會(huì)有問(wèn)題

所以把圖片縮小到256x256的規(guī)格，但還是超過(guò)了

有什么好的解決方案嗎？ 已經(jīng)減過(guò)幀了 不能再減了