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

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

希望这会起作用。