title: Pulsating image rings css animations
body: <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>