ripple animation with radial gradient - css

Question

I want to create infinite ripple animation inside a rectangle. The basic idea from my side is to start animating one circle to another. But the output is quite awkward.
Below is my code --
body {
background: #454a59;
}
.ripple {
width: 400px;
height: 80px;
margin-top: 40px;
position: relative;
background-color: red;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
animation: blinds 3s linear infinite;
}
#keyframes blinds {
0% {
background-image: radial-gradient(circle, #ff8895 0 70px);
}
20% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, transparent 100px 100%);
}
40% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, transparent 125px 100%);
}
60% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, transparent 150px 100%);
}
80% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, transparent 175px 100%);
}
100% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, rgba(255, 255, 255, 0.4) 175px 200px, transparent 200px 100%);
}
}
<div class="ripple">
</div>
Also the animation is not smooth and circle will become invisible in the end.
Any help would be appreciated.
Thanks in advance.

Answer 1

Use multiple gradient and animate their size. Below an example where you can adjust the values until you get the result you want.
body {
background: #454a59;
}
.ripple {
width: 400px;
height: 80px;
margin-top: 40px;
position: relative;
background-color: red;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
animation: blinds 5s ease-in-out infinite;
background:
radial-gradient(#ff8895 70%,#0000 71%), /* 1 */
radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 2 */
radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%), /* 3 */
radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 4 */
radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%) /* 5 */
red;
background-position: center;
background-repeat: no-repeat;
}
#keyframes blinds {
0% {background-size: 0 0}
/* 1 , 2 , 3 , 4 , 5*/
20% {background-size: 70px 70px, 0 0 ,0 0 ,0 0 ,0 0}
40% {background-size: 70px 70px, 100px 100px,0 0 ,0 0 ,0 0}
60% {background-size: 70px 70px, 100px 100px,125px 125px,0 0 ,0 0}
80% {background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,0 0}
100%{background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,175px 175px}
}
<div class="ripple">
</div>