title: SVG Circle and box-shadow animation trouble
body: <p>I'm trying to add a ripple / sonar pulse type of animation to a SVG circle but it does not do anything. Here's a Fiddle showing the issue: <a href="http://jsfiddle.net/scole/ono0awyw/" rel="nofollow">http://jsfiddle.net/scole/ono0awyw/</a></p>
  
  <p>In the Fiddle, the desired effect works on an empty div element in the center of the screen but applying the same CSS animation class to the SVG circle does nothing. Is it not possible to animate box-shadow changes?</p>
  
  <p>I'd REALLY like to keep the solution as an application of a CSS class onto the SVG element.</p>
  
  <p>Thanks!
  Steve</p>
  
  <p>I can't post the Fiddle link without some code so here's the CSS class that the animation is based on:</p>
  
  <pre><code>.ripple,.ripple:before,.ripple:after {
    display:block;
    border-radius:2px;
    margin:0 auto;
    width:2px;
    height:2px;
    -webkit-animation:rip 2s infinite;
    -moz-animation:rip 2s infinite;
  }
  .ripple {
    position:absolute;
    z-index:1000;
    top:10px;
    left:15px;
  }
  .ripple:before,.ripple:after {
    content:'';
    position:absolute;
  }
  .ripple:before {-webkit-animation-delay:.1s;-moz-animation-delay:.2s;top:5px;left:0px;}
  .ripple:after {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:0;}
  @-webkit-keyframes rip 
  {
    0%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }
    5%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 rgba(255,0,0,0.5),
                 0 0 0 0 transparent,
                 0 0 0 0 rgba(0,0,0,0.1);
    }
    100% {
      box-shadow:0 0 40px 50px transparent,
                 0 0 10px 60px transparent,
                 0 0 30px 70px transparent,
                 0 0 5px 80px transparent;
    }
  }
  @-moz-keyframes rip 
  {
    0%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }
    5%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 rgba(255,0,0,0.5),
                 0 0 0 0 transparent,
                 0 0 0 0 rgba(0,0,0,0.1);
    }
    100% {
      box-shadow:0 0 10px 75px transparent,
                 0 0 20px 75px transparent,
                 0 0 30px 75px transparent,
                 0 0 40px 75px transparent;
    }
  }
  </code></pre>