css3的@keyframe动画在100%的时候设置为opacity:0在IOS上最后一帧会变成opacity:1

问题描述：

css使用animation动画opacity:0时在IOS上最后一帧会变成opacity:1；导致的现象为动画结束时元素区域会闪一下

代码：

/*radar*/
.bannerContainer span{
    display: none;
    position: absolute;
    top:50%;
    left: 50%;
     1.3rem;
    height: 1.3rem;
    margin-top: -0.65rem;
    margin-left: -0.65rem;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.bannerContainer span.radar:first-child{
    -webkit-animation: radar 2s linear infinite;
    animation: radar 2s linear infinite;
}
.bannerContainer span.radar:last-child{
    -webkit-animation: radar 2s linear 1s infinite;
    animation: radar 2s linear 1s infinite;

}
@-webkit-keyframes radar{
    0%{
         1.3rem;
        height: 1.3rem;
        margin-top: -0.65rem;
        margin-left: -0.65rem;
        opacity: 1;
    }
    100%{
          8rem;
         height: 8rem;
         margin-top: -4rem;
         margin-left: -4rem;
        opacity: 0;
     }
}

解决方法：

1、将以下代码

@-webkit-keyframes radar{
    0%{
         1.3rem;
        height: 1.3rem;
        margin-top: -0.65rem;
        margin-left: -0.65rem;
        opacity: 1;
    }
    100%{
          8rem;
         height: 8rem;
         margin-top: -4rem;
         margin-left: -4rem;
        opacity: 0;
     }
}

改成使用transform:scale()控制大小即可解决ios上动画结束时元素区域会闪一下bug。亲测有效。。。。

2、解决 iOS webkit 使用CSS动画时闪烁的问题

 -webkit-backface-visibility: hidden;