CSS3 关键帧动画：结束并停留在最后一帧
[英]CSS3 Keyframe Animations: End and stay on the last frame
问题描述
我在尝试播放 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 也不会在那里做任何事情。
任何帮助将不胜感激。
4 个解决方案
解决方案1
64 已采纳 2013-10-22 14:24:01
animation-fill-mode:forwards是要使用的正确属性。 Is似乎不起作用，因为精灵图像背景有一个默认的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正在做它应该做的事情。 解决方案的第二部分是将final to和steps CSS 属性更改为正确定位背景。 所以我们真的需要背景停在-450px并使用9步。
-webkit-animation: play .8s steps(9) forwards;
@keyframes play {
from { background-position: 0; }
to { background-position: -450px; }
}
查看演示- 我只修复了 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>
解决方案2
2 2013-10-21 21:11:13
在 css 中将 'infinite' 更改为 '1'，这为我解决了
解决方案3
0 2022-01-06 07:38:52
只需添加
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
-2 2015-04-01 07:20:22
以下代码将使过渡停留在最后一帧：
-webkit-timing-function:ease;
-webkit-iteration-count:1;
在最后一帧动画完成后按顺序播放CSS3循环
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.