CSS3关键帧animation：结束并保持最后一帧

尝试播放CSS3关键帧animation时遇到了一些困难，并且在animation完成后，将相关元素粘在最后一帧。 就我的理解，我必须为此设置的属性应该是animation填充模式，它应该具有向前的价值; 这没有做任何事情。

.animatedSprite { .animation-name: sprite; .animation-duration: .5s; .animation-iteration-count: 1; .animation-direction: normal; .animation-timing-function: steps(3); .animation-fill-mode: forwards; //Vendor prefixes... } 

这将只播放一次animation，然后返回到第一帧。 我在JSFiddle（ http://jsfiddle.net/simurai/CGmCe/ ）find了一个关键帧animation的例子，改变填充模式转发和设置迭代计数为1也不会在那里做任何事情。

任何帮助将不胜感激。

Answer 1

animation-fill-mode:forwards是使用正确的属性。 是不是似乎工作，因为精灵图像背景有一个默认的background-repeat:repeat ，所以你认为你看到的最后一帧实际上是重复的背景图像的第一帧。

如果你设置

 background: url("http://files.simurai.com/misc/sprite.png") no-repeat animation: play .8s steps(10) forwards; @keyframes play { from { background-position: 0px; } to { background-position: -500px; } } 

并运行演示最后一帧现在是空白的 – 所以forwards正在做它应该做的。 解决scheme的第二部分是更改CSS属性的最后steps和steps以正确定位背景。 所以我们真的需要背景在-450px停止，并使用9步骤。

 -webkit-animation: play .8s steps(9) forwards; @keyframes play { from { background-position: 0; } to { background-position: -450px; } } 

查看演示 – 我只修复了Chrome的属性。 此外，这里是原始图像消失的示例图像。

 .hi { width: 50px; height: 72px; background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat; -webkit-animation: play .8s steps(9) forwards; -moz-animation: play .8s steps(10) infinite; -ms-animation: play .8s steps(10) infinite; -o-animation: play .8s steps(10) infinite; animation: play .8s steps(9) forwards; } @-webkit-keyframes play { from { background-position: 0px; } to { background-position: -450px; } } @-moz-keyframes play { from { background-position: 0px; } to { background-position: -500px; } } @-ms-keyframes play { from { background-position: 0px; } to { background-position: -500px; } } @-o-keyframes play { from { background-position: 0px; } to { background-position: -500px; } } @keyframes play { from { background-position: 0px; } to { background-position: -450px; } } 

 <div class="hi"></div> 

Answer 2

在CSS中将“无限”更改为“1”，这为我解决了这个问题

Answer 3

以下代码将使转换停留在最后一帧：

 -webkit-timing-function:ease; -webkit-iteration-count:1;