css - 完成后如何阻止CSS3动画跳回到开头

Question

我有一个 CSS3 动画，它只是向下移动<div>（通过top: 0px;to 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.

看到这个其他的小提琴。

Mozilla Dev Network上有关它的更多信息。