Simple CSS Keyframe doesnt take effect

September 10, 2022

I want to make an infinite ripple effect and it should work fine, but thats not the case. For some reason the keyframe functions dont seem to have effect. What I am missing?

 /* CUSTOM CSS */

.rippler {
  display: block;
  width: 200px;
  height: 200px;
  margin: 160px auto;
  -webkit-animation: ripple 0.6s linear infinite;
  border-radius: 100px;
    background: blue;
}

@-webkit-keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(blue, 0.1),
                0 0 0 20px rgba(blue, 0.1),
                0 0 0 60px rgba(blue, 0.1),
                0 0 0 100px rgba(blue, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(blue, 0.1),
                0 0 0 60px rgba(blue, 0.1),
                0 0 0 100px rgba(blue, 0.1),
                0 0 0 140px rgba(blue, 0);
  }
}

<span class="rippler"></span>

A pretty similar code is working fine: https://codepen.io/jaguar66/pen/RrWjZp?editors=1100

>Solution :

It seems you’re wrongly using the rgba function. That function expects 4 parameters: red, green, blue and opacity where the first 3 act as the values for the RGB color system which must be a valid integer between 0 and 255 and the last parameter must be a valid number between 0 and 1 (fractions are allowed in the opacity parameter).
In your case you are sending only 2 parameters which is wrong. The fix is simple, just send the blue color as RGB values like so: rgba(0, 0, 255, 0.1).

Here’s a working example:

/* CUSTOM CSS */

.rippler {
  display: block;
  width: 200px;
  height: 200px;
  margin: 160px auto;
  -webkit-animation: ripple 0.6s linear infinite;
  border-radius: 100px;
  background: blue;
}

@-webkit-keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 255, 0.1),
                0 0 0 20px rgba(0, 0, 255, 0.1), 
                0 0 0 60px rgba(0, 0, 255, 0.1),
                0 0 0 100px rgba(0, 0, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 255, 0.1),
                0 0 0 60px rgba(0, 0, 255, 0.1),
                0 0 0 100px rgba(0, 0, 255, 0.1),
                0 0 0 140px rgba(0, 0, 255, 0);
  }
}