ripple animation with radial gradient

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%);
  }
}

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

Any help would be appreciated.

Thanks in advance.

user_8620333 · Answer

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}
}

ripple animation with radial gradient

1 Answers