CSS Spritesheet 动画填充模式前进，步骤在错误的位置结束？

Question

下面的代码片段应该播放 1-3 帧 3 次，并且(在我看来)在第 3 帧结束，而不是在完成后显示第 4 帧，这在之前的 3 次迭代中没有动画。

由于这在 Chrome、Safari 和 FF 中同样有效，我只能问:“这怎么可能是正确的行为？”背景偏移有:0px, -50, -100, -0, -50, -100, -0, -50, -100, -150px

在任何情况下，播放一个动画序列 n 次并在前 3 次迭代中的最后一帧结束似乎是不可能的。

有没有办法参数化此动画以在它完成后在所需的帧结束？

可以为一次迭代和无限次迭代对所需结果进行参数化，但不能在其间进行参数化。

目前我认为这是不可能的。这似乎是 W3C 如何指定 steps() 函数和填充模式的意外结果。

https://github.com/w3c/csswg-drafts/issues/136

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    animation: play 3s steps(3) 3 forwards;
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -150px; }
}

<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div id="x7" class="hi"></div>

引用:http://jsfiddle.net/simurai/CGmCe/light/

Answer 1

改变你的CSS。

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    animation: play .8s steps(10);
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

这非常有效。