每次无限CSS3动画结束时出现小故障/闪烁/闪烁

强制性代码，但JSFIDLE正在准确地演示这个问题。我有一个圆圈，它会在3秒内展开并逐渐消失。声纳风格是我的意图。问题是动画完成后，它会快速“闪烁”，然后重新开始

请参见此处的问题：

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

---

编辑：在fiddle上为其他浏览器添加动画支持。从我的理解中删除了ease out，您看到的闪烁是动画重新启动时重置的

不透明度：0.5

，但在它移动圆之前（显示一帧）

问题的一个可能解决方案（可能不是最优雅的）是添加一个额外的关键帧并设置

height:0px

，以便在动画重新启动之前将圆移开

CSS:

---

-我还将关键帧设置为

不透明度：0.0这样圆就会完全消失。现在，您只需使用不透明度级别和关键帧%，即可获得所需的外观
 非常感谢您抽出时间回答这个问题，并找到解决方案！尤其是我确信它被埋葬了。我得出的结论是，不透明度动画是在计算位置之前完成的，给出了我看到的效果。据我所知，这也是一个只有webkit的问题。编辑：我的解决方案与您的非常相似：）
@-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;
}

@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)}
}