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，所以你认为你看到的 last 框架实际上是 重复背景图片的框架。

如果您设置

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;