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}