title: CSS3 Tranisition Box Shadow Pulse
body: <p>I'm trying to ensure that only the box shadow has the pulsate and not the whole button. </p>
  
  <p>The experience should see the button solid but with the box shadow fading in and out if that makes sense. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>.gps_ring {
      border: 3px solid #999;
      -webkit-border-radius: 30px;
      height: 42px;
      width: 180px;
      background-color: blue;
      text-align: center;
      display: block;
      color: white;
      box-shadow: 0 0 17px black;
    -moz-box-shadow: 0 0 17px black;
    -webkit-box-shadow: 0 0 17px black;
      -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;}
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Fy8vD/3414/" rel="nofollow noreferrer">EXAMPLE</a></p>