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

Question

我有一个视频，我从中取出了帧，然后用它们构建了一个精灵 sheet。我正在尝试使用 CSS 在网站中为这个精灵 sheet 制作动画。我的问题是动画是“'rolling'”通过精灵 sheet 而不是跳转到特定部分。我的意思是，如果帧速率太慢，您可能会看到一帧的一半和下一帧的另一半。这对我来说很奇怪，因为我遵循了这里的指南：http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps

如何让动画跳转到 sprite sheet 的特定部分而不只是“'rolling'”？

这是我使用的代码：

#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，整个sheet的宽度是27328。

Answer 1

意识到我没有足够的帧数...如果您遇到这种情况；检查你的 frames/steps!

个数

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

How to jump to specific sections of a sprite sheet in css?

html

css

animation

sprite