html - 播放一次 css3 sprite 动画并保持在最后一帧

Question

我有一个 sprite 动画，我想播放一次，完成并停在最后一帧。我试过将迭代计数更改为 1 并向前添加到填充模式，但都没有用。任何信息或想法都会有所帮助。

我正在使用这个 css3 sprite 方法。 http://jsfiddle.net/simurai/CGmCe/light/

-webkit-animation: crouch 1.2s steps(2, end) 1;

Answer 1

这就是填充模式的用途。将 both 关键字添加到您的动画定义中，当动画停止时，它应该“卡住”在最后一帧并保持这种状态。

编辑:啊，我明白发生了什么事。该示例中的动画实际上超出了一帧。您需要将 to 关键帧更改为 -450px 并将步数降低到 9，同时添加 both 关键字。

请注意，-ms-animation 从未存在过，并且不再需要 -o-animation 或 -moz-animation。这只是 animation 和 -webkit-animation。