如何在完成后停止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.

看到另一个小提琴.

关于Mozilla Dev Network的更多信息.