CSS3 关键帧动画：结束并停留在最后一帧
Posted
技术标签:
【中文标题】CSS3 关键帧动画：结束并停留在最后一帧【英文标题】：CSS3 Keyframe Animations: End and stay on the last frame 【发布时间】：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 也不会在那里做任何事情。
任何帮助将不胜感激。
【问题讨论】：
【参考方案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;
<div class="hi"></div>【讨论】：
感谢@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 处进行迭代，则在最后一帧结束时它将恢复。以上是关于CSS3 关键帧动画：结束并停留在最后一帧的主要内容，如果未能解决你的问题，请参考以下文章
CSS3 Animation 控制元素在动画的初始位置开始动画