我怎样才能停止从完成跳回到开始的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的更多信息。