JQuery - CSS glow animation

by Ayyappan Sakthivadivel

HTML

<img src="http://api.aximsoft01.acuitusag.network/images/status_color/6_3.png" id="myGlower" />

CSS

#myGlower {
    border-radius: 50%;
    -webkit-transition: border 2s linear, box-shadow 1s linear;
       -moz-transition: border 2s linear, box-shadow 1s linear;
            transition: border 2s linear, box-shadow 1s linear;
    margin: 50px;
    float:left;
}

#myGlower.active {
  -webkit-box-shadow: 0px 0px 49px 22px rgba(255,0,0,1);
  -moz-box-shadow: 0px 0px 49px 22px rgba(255,0,0,1);
  box-shadow: 0px 0px 49px 22px rgba(255,0,0,1);
}

JavaScript

var glower = $('#myGlower');
window.setInterval(function() {  
    glower.toggleClass('active');
}, 500);