css3动画播放后如何停止在最后的状态?

Question

css3动画播放后如何停止在最后的状态？例如动画从left:0px运动到left:200px，播放完后，又自动跳回left:0px了，如何让它播放完后，保持在left:200px;?

Answer 1

animation-fill-mode：forwards； //forwards属性可以让动画定格到最后一帧

Answer 2

/*动画写成
@keyframes name
{
0%{left:0px;}
100%{left:200px;}
}
动画定义为只播放1遍，然后动画样式后面定义好left:200px就可以了，因为样式是从前往后执行的。亲测成功，希望可以帮到你。

来个例子吧，省得诸位看不懂再给差评：比如1个class叫box的div，照楼主的要求就是：
@keyframes move
{
0%{left:0px;}
100%{left:200px;}
}
.box{animation: move 2s linear 0 1; left: 200px;}
这样就可以把box的left定在200px。*/

上面是注释，也是另外的方法。

Answer 3

这个可以婉转的实现，比如默认就让它在left:200，而且默认是隐藏看不见的，然后
0%-5%{ left:200},
5%-10%{left:0,并显示出来（opacity=1）}
100%{left:200}