css - 每个无限 CSS3 动画结束时出现毛刺/闪烁/闪烁

Question

强制性代码，但 jsFiddle 准确地演示了这个问题。我有一个在 3 秒内扩大和淡出的圆圈。声纳风格是我的意图。问题是动画完成后它会快速“闪烁”然后重新开始。

请在此处查看问题:http://jsfiddle.net/39MJL/3/

@-webkit-keyframes pulsate /* Safari and Chrome */{
    0% {width:150px;height:150px;top:-178px;opacity:0.5;}
    100% {width:900px;height:900px;top:-550px;opacity:0.1;border: 3px solid rgba(192, 61, 29,      .9)}
}
#pulse1 { border-radius:50%;position:relative;height:150px;width:150px;top:-178px;
    opacity:0.3; margin:0 auto;z-index:-1;border:1px solid #da4521;background-color:#DA785A;
    animation: pulsate 3s infinite;
    -webkit-animation: pulsate 3s infinite;
}

有没有人遇到过这个问题？如果您没有发现它的问题，您介意分享您使用的浏览器吗？

编辑:在 fiddle 上添加了对其他浏览器的动画支持。删除缓出

Answer 1

据我所知，您看到的闪烁是 opacity:0.5在动画重新开始时重置，但在它移动圆圈之前(出现一帧)。

您的问题的一个可能解决方案(也许不是最优雅的)是添加一个额外的关键帧并设置 height:0px在动画重新开始之前让圆圈离开。

CSS:

@keyframes pulsate {
  0% {width:150px;height:150px;top:-178px;opacity:0.5;}
  90% {width:900px;height:900px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)}
  99% {width:900px;height:900px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)}
  100% {width:900px;height:0px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)}
}

FIDDLE - 我还将关键帧设置为 opacity:0.0;所以圆圈完全消失了。现在您只需调整不透明度级别和关键帧百分比即可获得您想要的外观。