css - 为什么我的 css sprite 看起来像一部老电影？

Question

我不明白为什么我的 Sprite 像老电影一样动画，而不是将背景位置从一个位置更改到另一个位置。它从左到右平滑滚动过渡，这是有道理的，因为我要求位置从左到右改变，但它不应该从一个图像跳到下一个，因为我使用了 steps() 吗？请帮助找出我做错了什么:

#sprite {
background: url('img/example.png') no-repeat -4px -5px;
width: 43px;
height: 82px;

  -webkit-animation: dance .5s steps(4) infinite;
        animation: dance .5s steps(4) infinite;
}

@-webkit-keyframes dance {
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; }
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;}
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;}
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;}
}

@keyframes dance {
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; }
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;}
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;}
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;}
}

我真的很难弄明白，而且我很不擅长解释，所以我想也许我可以制作一个 JSFiddle 来展示它在我的版本中的动画效果与 the example 的区别。 .

JS Fiddle

如果您能提供任何帮助，我将不胜感激。如果我可以提供任何其他信息来帮助解决这个问题，请告诉我。

谢谢!

Answer 1

当您设置具有多个关键帧的动画时，计时功能(在本例中为 steps)适用于一个关键帧与下一个关键帧之间的过渡。

所以，即使看起来很奇怪，CSS 也应该是

#ryu {
    -webkit-animation: dance 8s steps(1) infinite;
    animation: dance 8s steps(1) infinite;
}

也就是只需要一步

fiddle