播放一次css3精灵动画并保持最后一帧

Question

我有一个精灵动画，我想玩一次，完成并保持最后一帧。我已经尝试将迭代计数更改为1并向前添加到填充模式但是都没有工作。任何信息或想法都会有所帮助。

我正在使用这个css3精灵方法。 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都不再是neede。这只是animation和-webkit-animation。

Answer 2

没有一些javascript就无法在最后一帧停止动画（或者你可以简单地使用精灵动画工具包。

您需要使用javascript：

1. 测试样式是否应用于元素background-position == 500px。这可能是也可能不是直截了当的。我们可以使用javascript触发属性更改的事件吗？如果没有，那么你将不得不使用计时器重复测试
2. 使用javascript在上述条件中设置animation-play-state:paused。

OR：

你可以找到一些精灵动画脚本，这无疑可以让你对动画有更多的控制。

更新：

为了使属性的测试更容易（不使用setInterval - 它使用了一些不错的技巧 - 你可以使用jQuery的插件。

有一个SO question about mutation events here