html - 播放一次 css3 sprite 动画并按住最后一帧

Question

我有一个精灵动画，我想播放一次，完成并保持最后一帧。我尝试将迭代计数更改为 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。

Answer 2

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

您需要使用 javascript 来：

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

或者：

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

更新：

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

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