停格动画CSS

Question

我正在制作一部奔跑的猫的定格动画。我已经准备好所有幻灯片。但是它似乎无法正常工作：

div {
  animation: run 1s steps(10) infinite;
  -webkit-animation: run 1s steps(10) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; 
  background-repeat: no-repeat;
  height: 200px;
  width: 400px;
}

@keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}
@-webkit-keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}

<div></div>

- timbaktu

---

以下是如何完成此操作的解释。链接 - Mr_Green

Answer 1

实际上你有13张幻灯片。所以请使用steps(13)。

div {
  animation: run 1s steps(13) infinite;
  -webkit-animation: run 1s steps(13) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; 
  background-repeat: no-repeat;
  height: 200px;
  width: 400px;
}

@keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}
@-webkit-keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}

<div></div>

- The Pragmatick

---

托管的图片有四种幻灯片样式，我如何更改样式以达到“奔跑的猫”风格，也就是更改图像边距。 - sanoj lawrence

这完全是“background-position”的游戏。在“@ keyframes”中，更改“background-position”的“x”坐标。 - The Pragmatick

你需要同样调整高度和台阶数量。 - The Pragmatick

谢谢@Mr_Green！所有的CSS都是Timbatu写的，只有steps()部分是我写的。 - The Pragmatick