How to Create a Pulsing Glow Ring Animation in CSS

How to create a pulsing glow ring animation in CSS?

The threads linked in comments are helpful but I don't think this is an exact duplicate because this one is slightly more complex due to the need for multiple rings.

We can create this effect by animating transform: scale() and opacity of the elements. Here, we need more than 1 element because in the linked website we can see atleast 3 rings at any given point of time (one which is fading-in, one which is at its peak, one which is fading-out). By adding the same animation to two pseudo-elements, an inner element (the span) and by delaying the animation on two of them we can achieve the required animation effect.

div {  position: relative;  height: 100px;  width: 100px;  border-radius: 50%;  margin: 50px;  border: 2px solid white;}div:before,div:after, span {  position: absolute;  content: '';  height: 100%;  width: 100%;  top: 0%;  left: 0%;  border-radius: 50%;  box-shadow: 0 0 15px #287ec6;  animation: glow-grow 2s ease-out infinite;}div:after {  animation-delay: .66s;}span{  animation-delay: 1.33s;  }@keyframes glow-grow {  0% {    opacity: 0;    transform: scale(1);  }  80% {    opacity: 1;  }  100% {    transform: scale(2);    opacity: 0;  }}body {  background: black;}

<div>  <span></span></div>

Pulsating ring animation with CSS

Here's a general solution using CSS flexbox, transform and pseudo-elements.

body {  display: flex;  align-items: center;  justify-content: center;  background-color: lightyellow;  height: 100vh;  margin: 0;}#container {  display: flex;  align-items: center;  justify-content: center;}.sphere {  display: flex;  background: lightblue;  border-radius: 300px;  height: 100px;  width: 100px;}#container::after {  display: flex;  background: lightpink;  border-radius: 300px;  height: 250px;  width: 250px;  animation: pulsate 2.5s ease-out;  animation-iteration-count: infinite;  opacity: 0.0;  content: "";  z-index: -1;  margin: auto;  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;}@keyframes pulsate {  0% {    transform: scale(0.1, 0.1);    opacity: 0.0;  }  50% {    opacity: 1.0;  }  100% {    transform: scale(1.2, 1.2);    opacity: 0.0;  }}

<div id="container">  <div class="sphere"></div></div>

How to create a pulse effect using -webkit-animation - outward rings

You have a lot of unnecessary keyframes. Don't think of keyframes as individual frames, think of them as "steps" in your animation and the computer fills in the frames between the keyframes.

Here is a solution that cleans up a lot of code and makes the animation start from the center:

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:214px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

You can see it in action here: http://jsfiddle.net/Fy8vD/

Create a CSS pulse effect from border outwards

You can do it with shadow effect too like this..

   .ripple{  display: block;  width: 30px;  height: 30px;  border-radius: 50%;  border:2px red solid;  animation: pulse 2s infinite;}
@-webkit-keyframes pulse {  0% {    -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);  }  70% {      -webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);  }  100% {      -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);  }}

   <div class="ripple"></div>

Multiple rings with ripple effect around down arrow

Here is a variant of solution:

body {    background-color: #668822;}.down-arrow {  display: none;  position: absolute;  left: 0;  right: 0;  margin: 0 auto;  top: 81.5%;  z-index: 5;  border-radius: 50%;  height: 80px;  width: 80px;}.ring {  border: 2.5px solid white;  -webkit-border-radius: 50%;  height: 80px;  width: 80px;  position: absolute;  left: 0;  right: 0;  top: 200px;  z-index: 5;  margin: 0 auto;  -webkit-animation: pulsate 2s ease-out;  -webkit-animation-iteration-count: infinite;  -webkit-animation-delay: 2s;  opacity: 0.0;}.ring2 {  -webkit-animation-delay: 1.7s;}.ring3 {  -webkit-animation-delay: 1.4s;}@-webkit-keyframes pulsate {  0% {    -webkit-transform: scale(0, 0);    opacity: 1;  }  100% {    -webkit-transform: scale(1.2, 1.2);    opacity: 0;  }}

<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow-page-one animated                slideInDown"><div class="ring"></div><div class="ring ring2"></div><div class="ring ring3"></div>

CSS pulse animation override on hover

Simply remove the scale(1) from 100%. You also don't need to pause the animation

html,
body {
  padding: 20px;
}

@keyframes pulse {
  0%,
  100% {
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(1.33);
  }
}

.circle {
  border-radius: 50%;
  border: 5px solid #f0f;
  height: 30px;
  width: 30px;
  animation: pulse 2s infinite;
}

.circle:hover {
  transform: scale(1.33);
  /* animation-play-state: paused; */
}

<div class="container">
  <div class="circle"></div>
</div>

Pulsating Leaflet marker using CSS3 animations

After investigating for some more time I found a way to solve the problem:

I changed the CSS code slighlty:

.css-icon {

}

.gps_ring { 
    border: 3px solid #999;
     -webkit-border-radius: 30px;
     height: 18px;
     width: 18px;       
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/
}

@-webkit-keyframes pulsate {
        0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
        50% {opacity: 1.0;}
        100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

And I changed the instantiation of my DivIcon class:

// Define an icon called cssIcon
var cssIcon = L.divIcon({
  // Specify a class name we can refer to in CSS.
  className: 'css-icon',
  html: '<div class="gps_ring"></div>'
  // Set marker width and height
  ,iconSize: [22,22]
  // ,iconAnchor: [11,11]
});

The following did the trick: I am now using the inner html to run the CSS animation. This will preserve the marker's location. Also note the iconSize attribute, which has the total size of the icon after the transformation ( 21 px =~ 18px x 1.2). Setting it this way centers the animated circle at the coordinate:

Working example: http://jsfiddle.net/christianjunk/waturuoz/

I still couldn't figure out, why my first approach wasn't working.

---

Related Topics