每个无限CSS3动画的末尾都有毛刺/闪烁/闪烁

debugcn 发表于 Dev

布鲁杜

强制性代码，但是jsFiddle恰好演示了这个问题。我有一个会在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;
}

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

编辑：在小提琴上添加了对其他浏览器的动画支持。删除了缓解

badAdviceGuy

据我所知，您看到的闪烁是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;以便圆圈完全淡出。现在，您只需要使用不透明度级别和关键帧百分比来获得所需的外观即可。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。