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);

animate动画执行一次(animation-iteration-count)并且停留在最后一帧(animation-fill-mode)_第1张图片

通过百度后找到了答案: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,keyframes)