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

【问题标题】：CSS3 Keyframe Animations: End and stay on the last frameCSS3 关键帧动画：结束并停留在最后一帧
【发布时间】：2013-10-30 12:34:51
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript css animation less

【解决方案1】：

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

如果你设置了

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

&lt;div class="hi"&gt;&lt;/div&gt;

【讨论】：

感谢@Neil - 我现在已经更新并嵌入了演示
完美的例子@andyb。谢谢
谢谢，forwards 属性有帮助，但在我的情况下它仍然不够，所以我不得不将宽度缩短最后一帧的宽度，然后将步数减少一个

【解决方案2】：

在 css 中将 'infinite' 更改为 '1'，这会为我解决问题

【讨论】：

嘿亚当，这将它返回到我的第一帧（在另外添加了 fill-mode: forwards 属性之后），而不是在最后一帧停止。

【解决方案3】：

添加

animation: mymove .8s forwards;

这里 'mymove' 是我的关键帧的名称

示例：

<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
 animation: mymove .8s forwards;
}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>The @keyframes Rule</h1>

<div></div>

</body>
</html>

【讨论】：

【解决方案4】：

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

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

【讨论】：

这是错误的，它是forwards，而不是迭代计数。如果您在 1 处进行迭代，则在最后一帧结束时它将恢复。