Pulsating image rings css animations

Question

I am trying to create a 'pulsating rings' animation around a circle image using css animations.

My image is a circle and 400px wide. I have managed to get the whole image to pulse, however I'm not quite sure how to create and animate the sepatate pulsating rings around the image.

I would like to image to be static, and the rings pulsate around it.

My code so far;

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png"></div>

CSS

.container {
  padding: 20px;
}

@-webkit-keyframes pulse_animation {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: 'pulse_animation';
  -webkit-animation-duration: 3000ms;
  -webkit-transform-origin: 70% 70%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
}

I have created a fiddle here.

I would like to create rings similar to the example here.

I'm sure I am very close. Any advice is appreciated.

Solution 1

You'll need a new div with the same width/height of image, add a border to it and animate.

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png">
  <div class="pulse-ring">
  </div>

</div>

CSS

.pulse-ring {
  content: '';
  width: 400px;
  height: 400px;
  border: 10px solid #F00;
  border-radius: 50%;
  position: absolute;
  top: 18px;
  left: 18px;
  animation: pulsate infinite 1s;
}

Example in JSFiddle

Solution 2

This is how I would do it:

<div class="container">
  <img src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png" />
  <div class="circle"></div>
</div>

.circle {
  border: solid 13px black;
  border-radius: 100%;
  position: absolute;
  top: 40px;
  left: 40px;
  width: 350px;
  height: 350px;
  z-index: 10;
  -webkit-animation: pulse 3s ease-out;
  -moz-animation: pulse 3s ease-out;
  animation: pulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Here is the JSFiddle demo

Basically add another div, give it the circle shape, overlay it on the image, the add the animation to it :)

Solution 3

This is how I did this.

https://codepen.io/anon/pen/Ombmrp

Basically I have a circle shape, then I draw bigger rings around it like 4 time. Then only used scale/opacity animation to make it look so much better with some delay on each ring.

Hope this helps!

Code:

@keyframes pulsate {
   0% {
      transform: scale(1, 1);
      opacity: 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      transform: scale(1.3, 1.3);
      opacity: 0;
   }
}

.circle {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;

span {
  position: absolute;
  text-align: center;
}

.red-medium-circle {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background: transparent;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5), inset 2px 2px 4px rgba(0,0,0,.5);
  border: 2px solid red;
  animation: pulsate infinite ease-in-out 2s 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}