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

CSS3 Keyframe Animations: End and stay on the last frame

提问by Joshua Jennings

I've run into some difficulty trying to play a CSS3 keyframe animation and have the relevant element stick at the last frame after the animation has completed. To my understanding, the property that I have to set for this to work should be animation-fill-mode, which should have the value of forwards; this doesn't do anything.

我在尝试播放 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... }

This will just play the animation once and then go back to the first frame. I found an example of keyframe animations at JSFiddle ( http://jsfiddle.net/simurai/CGmCe/), and changing the fill mode to forwards and setting the iteration count to 1 wouldn't do anything there, either.

这将只播放一次动画，然后返回到第一帧。我在 JSFiddle ( http://jsfiddle.net/simurai/CGmCe/)找到了一个关键帧动画示例，将填充模式更改为转发并将迭代计数设置为 1 也不会在那里做任何事情。

Any help would be greatly appreciated.

任何帮助将不胜感激。

回答by andyb

animation-fill-mode:forwardsis the correct property to use. Is does not seemto work because the sprite image background has a default background-repeat:repeat, so the lastframe you think you are seeing is actually the firstframe of the repeated background image.

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

If you set

如果你设置

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

and run the demo the final frame is now blank - so forwardsis doing what it should do. The second part of the solution is to change the final toand stepsCSS properties to position the background correctly. So we really need the background to stop at -450pxand use 9steps.

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

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

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

See demo- I only fixed the Chrome properties. Also here is the sample image in case the original disappears.

查看演示- 我只修复了 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>

回答by Adam Moseley

Change 'infinite' to '1' in the css, this fixes it for me

在 css 中将 'infinite' 更改为 '1'，这为我解决了

回答by vijay

The following code will make the transition stay on the last frame:

以下代码将使过渡停留在最后一帧：

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