我正在尝试在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
答案 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);
}
}