CSS3 Tranisition Box Shadow Pulse

I'm trying to ensure that only the box shadow has the pulsate and not the whole button.

The experience should see the button solid but with the box shadow fading in and out if that makes sense.

Here is my 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;}
}

EXAMPLE

Simply animate only the shadow, like this

.gps_ring {
    border: 3px solid #999;
    border-radius: 30px;
    height: 42px;
    width: 180px;
    background-color: blue;
    text-align: center;
    display: block;
    color: white;
    box-shadow: 0 0 17px black;
    animation: pulsate 1s ease-out infinite;
}
@-webkit-keyframes pulsate {
    0%   { box-shadow: 0 0 0 black; }
    50%  { box-shadow: 0 0 17px black; }
    100% { box-shadow: 0 0 0 black; }
}

<div id="state" class="grid_4 alpha">
  <a href="#" class="gps_ring">Touch me</a>
</div>