Question

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

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

Answer 1

新建keyframes元素，命名为myFirst。设置百分比，编写Animation属性对属性值的引用。为了开考虑兼容性问题，可以多写几个备选，详细步骤：

1、首先，准备好HTML前期工作以及对DIV的一个简单设置。

2、然后，新建keyframes元素，命名为myFirst。

3、然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。

4、这时候，可以为他写上各种百分比的颜色。

5、此时，就能编写Animation属性对属性值的引用。

6、为了开考虑兼容性问题，可以多写几个备选。

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。*/

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

好吧，是我无知，回答这问题时我还没看animation-fill-mode属性，确实，使用animation-fill-mode：forwards就可以实现我上面说的效果。所以以上方法请忽略。
误解了大伙，不好意思了。

Answer 3

CSS3 里面 animation下有个animation-fill-mode 设定动画完成后的状态，默认是none 设为forwards 就可以在动画完成后定格在动画最后一帧

Answer 4

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

Answer 5

animation-fill-mode: forwards;