Question

强制性代码，但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;
}

之前是否有人遇到此问题？如果你没有看到它的问题，你介意分享你正在使用的浏览器吗？

编辑：为小提琴上的其他浏览器添加了动画支持。删除了轻松

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;，以便圆圈完全淡出。现在你只需要使用不透明度级别和关键帧％来获得你想要的外观。

每个无限CSS3动画结束时出现Glitch / Flicker / Blink

1 个答案: