CSS3关键帧动画：结束并停留在最后一帧

Question

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

.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... } 

这将只播放一次动画，然后返回到第一帧。我在JSFiddle（http://jsfiddle.net/simurai/CGmCe/）上找到了一个关键帧动画的例子，并且将填充模式更改为转发并将迭代计数设置为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是做什么它应该做的。解决方案的第二部分是更改最终的to和steps CSS属性以正确定位背景。所以我们真的需要在-450px停止的背景和使用9步骤。

-webkit-animation: play .8s steps(9) forwards; 

@keyframes play { 
    from { background-position: 0; } 
    to { background-position: -450px; } 
} 

See demo - 我只修复了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;