Simple CSS Keyframe doesnt take effect

Question

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

Vendor prefixes are not needed anymore in the latest browsers: developer.mozilla.org/en-US/docs/Web/CSS/… — Roy
– Roy, Commented Sep 9, 2022 at 21:29
Your animation is working fine (you can test it if you change something obvious like the width or height). The problem is probably that your box-shadow isn't displayed as expected. — Steffen
– Steffen, Commented Sep 9, 2022 at 21:31

ThS · Accepted Answer · 2022-09-09 22:23:32Z

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

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

The explanation above is a brief description of the rgba function. I recommend learning more about the rgba() function on MDN.

Note: Vendor prefixes are no longer needed with the animation rule nor the keyframes declaration.

Collectives™ on Stack Overflow

Simple CSS Keyframe doesnt take effect

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related