在脉动圈之间暂停

时间:2017-08-08 09:43:52

标签: html css animation

我正在尝试在CSS中创建一个动画:两个脉动圆圈,第二个圆圈应该比第一个圆圈晚一点。然后暂停,然后再次相同的效果。我老实说无法弄清楚如何管理(我不是指动画延迟属性):

.pulse {
  border: 60px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  position: absolute;
  -webkit-animation: pulsate 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  background-color: red;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0.2;
  }
  5% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(3);
  }
}
<div class="marker">
  <div class="pin"></div>
  <div class="pulse">
    <div id="pulse-outer">
    </div>
  </div>
</div>

可以指定帮助!

我希望在右侧圆圈上获得与此相同的效果(但中间没有圆点) - &gt; https://codepen.io/athimannil/pen/MaXxwv

1 个答案:

答案 0 :(得分:0)

你可以继续使用关键帧,并且有两个关键帧,中间不会发生任何事情:

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0.2;
  }
  5% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.5;
  }
  30% {
    opacity: 0;
    -webkit-transform: scale(3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(3);
  }

}