問題描述：

css使用animation動畫opacity:0時在IOS上最後一幀會變成opacity:1；導致的現象為動畫結束時元素區域會閃一下

程式碼：

/*radar*/
.bannerContainer span{
    display: none;
    position: absolute;
    top:50%;
    left: 50%;
    width: 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%{
        width: 1.3rem;
        height: 1.3rem;
        margin-top: -0.65rem;
        margin-left: -0.65rem;
        opacity: 1;
    }
    100%{
         width: 8rem;
         height: 8rem;
         margin-top: -4rem;
         margin-left: -4rem;
        opacity: 0;
     }
}
 

解決方法：

1、將以下程式碼

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

改成使用transform:scale()控制大小即可解決ios上動畫結束時元素區域會閃一下bug。親測有效。。。。

2、解決 iOS webkit 使用CSS動畫時閃爍的問題

 -webkit-backface-visibility: hidden;