title: How to create a pulsing glow ring animation in CSS?
body: <p>I like the way this <a href="http://emcsecurity.com/" rel="noreferrer">website</a> made their rings glow and pulse out and would like to know how they did it.</p>
  
  <p>I can make something similar but I'm not very good. </p>
  
  <p>So this is all I was able to figure out but it doesn't seem to work.</p>
  
  <p>CSS:
  </p>
  
  <pre><code>glowycircleouter.blue .glow4 {
    box-shadow: 0 0 25px #287ec6;
  }
  .glowycircleouter .glow4 {
    -webkit-animation: glowyglow 3s 2250ms infinite;
    -moz-animation: glowyglow 3s 2250ms infinite;
    -ms-animation: glowyglow 3s 2250ms infinite;
    -o-animation: glowyglow 3s 2250ms infinite;
    animation: glowyglow 3s 2250ms infinite;
    animation-name: glowyglow;
    animation-duration: 3s;
    animation-timing-function: initial;
    animation-delay: 2250ms;
    animation-iteration-count: infinite;
    animation-direction: initial;
    animation-fill-mode: initial;
    animation-play-state: initial;
  }
  .glowycircleouter .glow4 {
    opacity: 0;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 200%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span class="glow4"&gt;&lt;/span&gt;
  </code></pre>