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

Question

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

43

我尝试播放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/），但将填充模式更改为"forwards"并将迭代次数设置为1也无效。

如果能得到任何帮助，将不胜感激。

- Joshua Jennings

4个回答

2

将css中的“infinite”更改为“1”，这样对我来说就可以解决问题了。

- Adam Moseley

2

嘿，亚当，这让我回到了第一帧（在另外添加fill-mode: forwards属性后），而不是停留在最后一帧。 - Joshua Jennings

0

只需添加

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>

- jo3

-2

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

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

- vijay

2

这是错误的，应该是“forwards”，而不是迭代计数。如果你在1处进行迭代，在最后一帧结束时它会恢复回去。 - NiCk Newman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyb · Accepted Answer

animation-fill-mode:forwards是正确的属性使用方式。它似乎不起作用，因为精灵图像背景有一个默认的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; }
}

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