播放一次 css3 sprite 动画并按住最后一帧答案

【问题标题】：Play a css3 sprite animation once and hold on the last frame播放一次 css3 sprite 动画并按住最后一帧
【发布时间】：2013-07-08 00:21:03
【问题描述】：

我有一个精灵动画，我想播放一次，完成并保持在最后一帧。我尝试将迭代计数更改为 1 并将其添加到填充模式，但均未成功。任何信息或想法都会有所帮助。

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

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

【问题讨论】：

【解决方案1】：

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

编辑：啊，我明白发生了什么。该示例中的动画实际上走得太远了一帧。您需要将to关键帧更改为-450px并将步数减少为9，并添加both关键字。

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

【讨论】：

【解决方案2】：

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

您需要使用 javascript 来：

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

或者：

您可以找到一些精灵动画脚本，这些脚本无疑可以对动画进行更多控制。

更新：

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

【讨论】：