Question

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

因为这在Chrome，Safari和＆amp; FF，我只能问：＆＃34;这怎么可能是正确的行为？＆＃34;背景偏移为：0px，-50，-100，-0，-50，-100，-0，-50，-100，-150px

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

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

期望的结果可以针对一次迭代和无限次迭代进行参数化，但两者之间没有任何内容。

现在我认为这是不可能的。这似乎是W3C如何指定steps（）函数和填充模式的意外结果。

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

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

参考：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; }
}

这很有效。

CSS Spritesheet动画填充模式转发，步骤结束于错误的位置？

1 个答案: