ripple animation with radial gradient-CodePudding

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 >

</div>

Also the animation is not smooth and circle will become invisible in the end.

Any help would be appreciated.

Thanks in advance.

CodePudding user response：

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 >

</div>