Html 停止运动动画CSS

我正在创建一个跑步猫的停止运动动画。我已经把所有的幻灯片准备好了。但它似乎不能正常工作：

div{
动画：无限运行1s步骤（10）；
-webkit动画：无限运行1s步骤（10）；
背景：url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; 
背景重复：无重复；
高度：200px；
宽度：400px；
}
@关键帧运行{
0%{背景位置：100%0；}
100%{背景位置：100%-2591px；}
}
@-webkit关键帧运行{
0%{背景位置：100%0；}
100%{背景位置：100%-2591px；}
}

---

实际上你有13张幻灯片。所以把

步骤（13）

div{
动画：无限运行1s步骤（13）；
-webkit动画：运行1s步骤（13）无限；
背景：url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; 
背景重复：无重复；
高度：200px；
宽度：400px；
}
@关键帧运行{
0%{背景位置：100%0；}
100%{背景位置：100%-2591px；}
}
@-webkit关键帧运行{
0%{背景位置：100%0；}
100%{背景位置：100%-2591px；}
}

---

托管图像有四种类型的幻灯片快照我如何更改其中的样式（猫跑样式）我的意思是图像边框这一切都是背景位置的游戏。在

@keyframes

中，更改

背景位置的
x
坐标

您必须同样调整高度和步数。谢谢@Mr_Green！所有的CSS都是Timbatu的。只需

steps（）

部分。以下是有关如何执行此操作的说明。