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

最新推荐文章于 2024-08-23 11:00:49 发布

跳跳虎Rain

最新推荐文章于 2024-08-23 11:00:49 发布

阅读量1.6w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： animate keyframes 文章标签： animate keyframes

本文链接：https://blog.youkuaiyun.com/weixin_42450794/article/details/82218298

animate 同时被 2 个专栏收录

1 篇文章

订阅专栏

keyframes

1 篇文章

订阅专栏

博主在做公司9周年H5动画时遇到问题，此前写动画忽略infinite参数致动画不停执行。使用animation - iteration - count让动画只执行一次后，动画执行完跳回原样式，后通过百度找到animation - fill - mode让动画停留在最后一帧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做公司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;