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也不会在那里做任何事情。

任何帮助将不胜感激。

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属性的最后stepssteps以正确定位背景。 所以我们真的需要背景在-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> 

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

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

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