animation shadow on circle using d3.js

Question

I have a code that normally an html element does an animation. But when trying to put this animation to a circle I created in d3.js does not work. what am I doing wrong?

http://jsfiddle.net/977cnnng/

var circle = svg.selectAll('circle')
.data(dataSet)
.enter()
.append('circle')
.attr({
    r:function(d){ return d },
    cx:function(d, i){ return i * 100 + 50 },
    cy:50,
    fill: 'white',
    class:'circle_animation'
});

 @-webkit-keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0px 0px 26px #FFFFFF;
    }
    100% {
        box-shadow: none;
    }
  }

@keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0px 0px 26px #FFFFFF;
    }
    100% {
        box-shadow: none;
    }
 }
circle.circle_animation {
  __border-radius:100%;
  __width:100px;
  __height:100px;
  __background: white;
-webkit-animation:input-shadow ease-in-out 2s infinite; /* Chrome, Safari, Opera */
animation:input-shadow ease-in-out 2s infinite;

}

In this link, I have the desired effect:

http://jsfiddle.net/fq3fb31d/