播放一次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。只是animation和-webkit-animation。

Answer 2

如果没有一些javascript（或者你可以简单地使用sprite动画工具包），就无法停止最后一帧的动画。

您需要使用javascript：

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

或：

你可以找到一些精灵动画脚本，毫无疑问，这将允许对动画进行更多的控制。

更新：

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

这里有一个关于突变事件的SO问题