定格动画 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>

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>

定格动画 CSS

Stop Motion Animation CSS

html

css

css-animations