如何在完成后停止CSS3动画跳回到开头

Question

我有一个CSS3动画，只需将<div>向下移动（通过top: 0px;到top: 300px;）。但我的问题是，我不知道如何在动画结束时阻止<div>返回顶部。有没有办法阻止这个？

这是一个小提琴样本：http://jsfiddle.net/y8tJ7/

Answer 1

你需要像这样反转动画。

@keyframes move {
  from{
    top: 20px;
  }
}

请参阅http://jsfiddle.net/gleezer/y8tJ7/1/

这样，它的结束位置在div样式中指定，您只需在关键帧中指定开始状态。

编辑：实现它的另一种方法可能是简单地添加：

animation-fill-mode: forwards。

查看此其他fiddle。

有关Mozilla Dev Network的更多信息。