animate动画执行一次（animation-iteration-count）并且停留在最后一帧（animation-fill-mode）

今天在做公司9周年H5动画的时候遇到了一点问题，之前写动画都是这么写的：

    animation:rotateScale 3s infinite;
    -moz-animation:rotateScale 3s infinite; /* Firefox */
    -webkit-animation:rotateScale 3s infinite; /* Safari and Chrome */
    -o-animation:rotateScale 3s infinite; /* Opera */

这里忽略了infinite含义为无穷的这个参数，所以动画不停的去执行

    animation:rotateScale 3s;
    -moz-animation:rotateScale 3s; /* Firefox */
    -webkit-animation:rotateScale 3s; /* Safari and Chrome */
    -o-animation:rotateScale 3s; /* Opera */
    animation-iteration-count:1;/*动画只执行一次*/
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;

让动画只执行一次，首选

animation-iteration-count，这样写后发现动画执行完毕后跳回了原CSS定义的样式

    width: 100%;
    margin-top: 30%;
    transform: scale(0.1) rotate(0deg);

通过百度后找到了答案：animation-fill-mode（让动画停留在最后一帧），这样就OK啦

    animation:rotateScale 3s;
    -moz-animation:rotateScale 3s; /* Firefox */
    -webkit-animation:rotateScale 3s; /* Safari and Chrome */
    -o-animation:rotateScale 3s; /* Opera */
    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;

animate动画执行一次（animation-iteration-count）并且停留在最后一帧（animation-fill-mode）

猜你喜欢