Question

我有一个视频，我从中取出帧然后用它们构建一个精灵表。我试图使用CSS在网站上为这个精灵表做动画。我的问题是动画是在滚动＆＃39;＆＃39;＆＃39;＆＃39;通过精灵表而不是跳转到特定部分。我的意思是，如果帧速率太慢，你可以看到一帧的一半与下一帧的另一半。这对我来说很奇怪，因为我遵循了这里的指南：http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps

如何让动画跳转到精灵表的特定部分，而不只是“滚动”＆＃39;＆＃39;？

这是我使用的代码：

#video{
  width: 426px;
  height: 240px;
  margin: 2% auto;
  background: url("spritesheet/sheetTest.png") left center;
  animation: play 33s steps(33) infinite;
}

@keyframes play {
    100% { background-position: -27328px; }
}

一帧为426x240，整张纸的宽度为27328。

Answer 1

意识到我没有足够数量的帧......如果发生了这种情况;检查您的帧数/步数！

如何跳转到css中精灵表的特定部分？

1 个答案: