CSS3 Tranisition Box Shadow Pulse - css

Question

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

Answer 1

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">
Touch me
</div>

Answer 2

I think this is what you need. Better solution http://codepen.io/governorfancypants/pen/zvMxWm
<div class="circle">
<div class="inner-circle"></div>
<div class="cover-circle"></div>
</div>
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
&:before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}
}
#keyframes pulse-ring {
0% {
transform: scale(.33);
}
80%, 100% {
opacity: 0;
}
}
#keyframes pulse-dot {
0% {
transform: scale(.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(.8);
}
}

Answer 3

HTML
<span class="pulse"></span>
CSS
.pulse {
margin:80px;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(0,0,0, 0.4);
animation: none;
}
.pulse:hover {
animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0.5);
}
70% {
-webkit-box-shadow: 0 0 0 50px rgba(0,0,0, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.5);
box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 50px rgba(0,0,0, 0);
box-shadow: 0 0 0 50px rgba(0,0,0, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
Hover effect.
CodePen: https://codepen.io/smith-harshan/pen/MWpGXeY
Hope this would be a help.