我有一个 CSS3 动画,它只是向下移动<div>
(通过top: 0px;
to top: 300px;
)。但我的问题是,我不知道如何防止<div>
动画完成后返回顶部。有什么办法可以防止这种情况发生吗?
这是一个示例小提琴:http: //jsfiddle.net/y8tJ7/
我有一个 CSS3 动画,它只是向下移动<div>
(通过top: 0px;
to top: 300px;
)。但我的问题是,我不知道如何防止<div>
动画完成后返回顶部。有什么办法可以防止这种情况发生吗?
这是一个示例小提琴:http: //jsfiddle.net/y8tJ7/
你需要像这样反转动画。
@keyframes move {
from{
top: 20px;
}
}
见http://jsfiddle.net/gleezer/y8tJ7/1/
这样,它的结束位置在 div 样式中指定,您只需在关键帧中指定开始状态。
编辑:实现它的另一种方法可能是简单地添加:
animation-fill-mode: forwards
.
看到这个其他的小提琴。
Mozilla Dev Network上有关它的更多信息。