ios定义animation时animation-fill-mode: forwards;不生效

代码:

.bounceOutLeft {
    -webkit-animation  : bounceOutLeft .5s 1;
    animation          : bounceOutLeft .5s 1;
    animation-fill-mode: forwards;
    position           : absolute;
    top                : 102px;
}

@-webkit-keyframes bounceOutLeft {
    20% {
        left: 62px
    }

    to {
        left: -300px;
    }
}

@keyframes bounceOutLeft {
    20% {
        left: 62px
    }

    to {
        left: -300px;
    }
}


animation-fill-mode: forwards; 在android上会正常停留在最后一帧,ios依然会回到初始状态,未停留在animation中100%的状态;
修改后代码:

.bounceOutLeft {
    -webkit-animation  : bounceOutLeft .5s 1;
    animation          : bounceOutLeft .5s 1;
    // animation-fill-mode: forwards; // ios未生效
    position           : absolute;
    top                : 102px;
    left               : -300px; // ios中需要写动画最后停留的状态,和animation中 100%一致
}

@-webkit-keyframes bounceOutLeft {
    0% {
        opacity: 0;
        left   : 42px;
    }

    20% {
        opacity: 1;
        left: 62px
    }

    to {
        left: -300px;
    }
}

@keyframes bounceOutLeft {
    0% {
        opacity: 0;
        left   : 42px;
    }

    20% {
        opacity: 1;
        left: 62px
    }

    to {
        left: -300px;
    }
}

具体原因尚未查到,文档中描述 animation-fill-mode 在ios是支持的,但不知道为什么没有生效,暂定了使用以上方法来实现停留在最后一帧的状态。

posted @ 2022-11-14 17:58  ZerlinM  阅读(157)  评论(0)    收藏  举报