2

我有一个 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; }

}
4

5 回答 5

1

你的意思是最后一帧是 background-position: -5310px; 您可以使用 -webkit-animation-fill-mode: forwards; 停在同一位置。

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

希望这会奏效。

于 2014-02-14T12:20:36.507 回答
1

如果steps(28)您有 29 帧并且对于背景位置偏移，请使用28*(height of your frames). 我只是想通了。此外， background-position 属性需要两个值。我相信，您总是必须同时指定 X 和 Y 偏移量。

JSFiddle 示例

于 2014-06-16T01:29:07.173 回答
0

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

    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
于 2013-06-25T19:24:50.283 回答
0

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

希望这对你有用！

于 2013-09-20T10:36:51.420 回答
0

我会说它工作正常。

我已经准备好了这把小提琴，

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

复制您的代码，并将动画从背景位置更改为背景颜色以轻松检查（并且因为我没有您的背景图像）；对我来说没问题

于 2013-06-25T21:58:13.990 回答