完成后如何阻止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。