41

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

4 回答 4

67

animation-fill-mode:forwards是要使用的正确属性。似乎不起作用，因为精灵图像背景有一个 default 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正在做它应该做的事情。解决方案的第二部分是更改 finalto和stepsCSS 属性以正确定位背景。所以我们真的需要背景停下来-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>

于 2013-10-22T14:24:01.667 回答
2

在css中将'infinite'更改为'1'，这为我修复了它

于 2013-10-21T21:11:13.097 回答
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>
于 2022-01-06T07:38:52.423 回答
-2

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

-webkit-timing-function:ease;
-webkit-iteration-count:1;
于 2015-04-01T07:20:22.323 回答