Question

我有一个29帧的动画树，我希望它停在最后一帧，（当它完全成长。）我一直在寻找一个解决方案让它停在最后一帧，但似乎没有任何影响它。我可以让它循环，或者只是重置到第一帧。

有人可以向我解释为什么这个动画只会重置回到第一帧？非常感谢！

这是我目前的代码：

.tree-right {
-webkit-animation: treeright 2.0s steps(29);
-moz-animation: treeright 2.0s steps(29);
-ms-animation: treeright 2.0s steps(29);
-o-animation: treeright 2.0s steps(29);
animation: treeright 2.0s steps(29);
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}


@-webkit-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }

}

@-moz-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }
}

@-ms-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }
}

@-o-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }
}

@keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }

}

Answer 1

这里最后一帧是你的背景位置：-5310px;你可以使用-webkit-animation-fill-mode：forwards;。

停在相同的位置

有关更多说明。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

希望这会奏效。

Answer 2

如果没有更多信息很难判断根本问题是什么，但您是否尝试将迭代限制设置为1？

    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;

Answer 3

我会说它工作正常。

我准备好了小提琴，

[http://jsfiddle.net/vals/REkbW/]

复制代码，只将动画从背景位置更改为背景色，以便轻松检查（因为我没有背景图像）;它适用于我

Answer 4

我注意到这有时只适用于位置为绝对的项目

希望这适合你！

Answer 5

如果您有29帧，请使用steps(28)，使用28*(height of your frames)使用背景位置偏移。 I just figured this out.此外，background-position属性需要两个值。我相信你总是需要指定X和Y偏移量。

JSFiddle example

css关键帧动画不会在最后一帧停止

5 个答案: