Pulsating image rings css animations
<p>I am trying to create a 'pulsating rings' animation around a circle image using css animations.</p>
<p>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.</p>
<p>I would like to image to be static, and the rings pulsate around it.</p>
<p>My code so far;</p>
<p>HTML</p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;img class=&quot;pulse&quot; src=&quot;http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png&quot;&gt;&lt;/div&gt;
</code></pre>
<p>CSS</p>
<pre><code>.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;
  }
}
</code></pre>
<p>I have created a <a href="https://jsfiddle.net/johnny_s/gpm5x3kp/1/" rel="nofollow noreferrer">fiddle here</a>.</p>
<p>I would like to create rings similar to the <a href="http://codepen.io/danest/pen/GxfqB/" rel="nofollow noreferrer">example here</a>.</p>
<p>I'm sure I am very close. Any advice is appreciated.</p>