Increase Ripple Effect Waves - html

Question

I have created a ripple effect in this circle. Everything looks great, but I want that this effect happen more often. It takes to long time for the other wave to appear when the other is gone. I tried to increase the animation speed, but it doesn't look good:
Here is what I've done so far:
.pulse {
width: 300px;
height: 300px;
background: #bdebca;
border: 1px solid #b9e8c9;
border-radius: 50%;
z-index: -1;
text-align: center;
position: absolute;
transform: scale(0.1, 0.1);
animation: ring-1 2s ease-out infinite
}
#keyframes ring-1 {
0% {
transform: scale(0.1, 0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
transform: scale(1.2, 1.2);
opacity: 0
}
}
.ripple-icon .inner {
background-color: lightblue;
color: #fff;
/* animation: pulse 2s infinite; */
}
.icon .inner {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: inline-block;
border-radius: 100%;
font-size: 22px;
color: #fff;
text-align: center;
font-weight: 700;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
cursor: pointer;
}
.icon {
width: 300px;
height: 300px;
border-radius: 100%;
text-align: center;
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
margin: 0 auto;
left: 50%;
margin-left: -150px;
}
<div class="ripple-icon icon hvr-bounce-in">
<div class="inner">
Ripple
</div>
<div class="pulse" style="left: 0px; top: 0px;"></div>
</div>

Answer 1

Something like this? Add more ripple's and delay the start of animation by 0.5s, 1s, 1.5s and 2s respectively.
Read more about animation delay:
https://developer.mozilla.org/en/docs/Web/CSS/animation-delay
https://css-tricks.com/almanac/properties/a/animation/
.pulse1,
.pulse2,
.pulse3,
.pulse4 {
width: 300px;
height: 300px;
background: #bdebca;
border: 1px solid #b9e8c9;
border-radius: 50%;
z-index: -1;
text-align: center;
position: absolute;
transform: scale(0.1, 0.1);
}
.pulse1 {
animation: ring-1 2s 0.5s ease-out infinite;
}
.pulse2 {
animation: ring-1 2s 1s ease-out infinite;
}
.pulse3 {
animation: ring-1 2s 1.5s ease-out infinite;
}
.pulse4 {
animation: ring-1 2s 2s ease-out infinite;
}
#keyframes ring-1 {
0% {
transform: scale(0.1, 0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
transform: scale(1.2, 1.2);
opacity: 0
}
}
.ripple-icon .inner {
background-color: lightblue;
color: #fff;
/* animation: pulse 2s infinite; */
}
.icon .inner {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: inline-block;
border-radius: 100%;
font-size: 22px;
color: #fff;
text-align: center;
font-weight: 700;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
cursor: pointer;
}
.icon {
width: 300px;
height: 300px;
border-radius: 100%;
text-align: center;
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
margin: 0 auto;
left: 50%;
margin-left: -150px;
}
<div class="ripple-icon icon hvr-bounce-in">
<div class="inner">
Ripple
</div>
<div class="pulse1" style="left: 0px; top: 0px;"></div>
<div class="pulse2" style="left: 0px; top: 0px;"></div>
<div class="pulse3" style="left: 0px; top: 0px;"></div>
<div class="pulse4" style="left: 0px; top: 0px;"></div>
</div>

Answer 2

In the .pulse css you can change the animation: ring-1 0.5s ease-out infinite
I have changed the speed from 2s to 0.5s