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是支持的,但不知道为什么没有生效,暂定了使用以上方法来实现停留在最后一帧的状态。

浙公网安备 33010602011771号