javascript - CSS3 关键帧动画 : End and stay on the last frame

Question

我在尝试播放 CSS3 关键帧动画并在动画完成后让相关元素停留在最后一帧时遇到了一些困难。据我了解，我必须为此设置的属性应该是 animation-fill-mode，它的值应该是 forwards；这没有做任何事情。

.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是要使用的正确属性。 似乎 不起作用，因为 sprite 图像背景有一个默认值 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>