animate动画执行一次并且停留在最后一帧

方法一：css3

animation-iteration-count:1;/*动画只执行一次*/
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-fill-mode: forwards; /*让动画停留在最后一帧 */
    -moz-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards;

方法二：js

animation只触发一次解决办法。

通过js控制让animation等于空，删除animation样式。

document.getElementById("div").style.animation = "";

document.getElementById("div").style.animation = "mymove 2s";

注意点：

1.js是一条语句执行一次 清空animation一定要在动画执行完之后执行清空语句和新的animation  setTimeout()

2.如果是有判断条件的情况下，通过判断条件来执行清空语句 if()  switch(){}

3.js操控的样式为行间样式，当animation不是添加在行间的时候，js操作无效。应当把animation添加在行间！否则会产生小bug  （非常重要的一点必须这么做可清除小bug）

4.@keyframes  这个不需要放在行间可放在任何地方 不影响任何动画效果

提醒：

使用animation 一定要通过时间轴 仔细计算行为的准确时间节点

小技巧：

animation配合setInterval()使用的时候，setInterval()  执行时间和动画执行时间长短 清空时把时间设置成0.000000000000000000001毫秒，这样边可以实现无缝切换。

例:不通过animation的次数来实现循环播放动画