css3的@keyframe动画在100%的时候设置为opacity:0在有些浏览器上最后一帧会变成opacity:1。

Question

问题：如题所述

导致的现象为动画结束时元素区域会闪一下

各个浏览器的表现有不同，自己测试了一下结果为：

• 桌面端：

  • mac

    • chrome 正常不会闪

    • safari 闪

  • windows

    • chrome/q/360等 正常不会闪

    • Firefox 闪

• 移动端：

  • 微信内置浏览器 正常不会闪

  • ios/android/uc 闪

HTML+script代码：

<div class="container" flex="dir:top cross:center">

    <div class="bannerContainer" flex="main:center">
        <span class="radar"></span>
        <span class="radar"></span>
    </div>

    <div class="startAnimBtn">start animation</div>

</div>

CSS动画相关代码：

/*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;
     }
}

在线查看网址：

点击查看

或手机浏览器输入：

shaoxun.me/fade

或WX扫描此二维码再使用手机自带浏览器查看：

求助：如何让该动画在移动端看起来正常不闪。。。。。。

Answer 1

BUG已解决，但是问题产生的原因还不清楚。

解决方式

将：

@-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()控制大小即可