JQuery - CSS glow animation

by Ayyappan Sakthivadivel

HTML

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

CSS

#myGlower {
    border-radius: 50px;

    border: 1px solid transparent;    
    -webkit-transition: border 0.05s linear, box-shadow 0.05s linear;
       -moz-transition: border 0.05s linear, box-shadow 0.05s linear;
            transition: border 0.05s linear, box-shadow 0.05s linear;
    width: 100px;
    height: 100px;
    margin: 50px;
}

#myGlower.active {
  -webkit-filter: drop-shadow(0 0 10px #f00);
 filter: drop-shadow(0 0 10px #f00); 

    /*-webkit-box-shadow: 0 0 50px orange;
       -moz-box-shadow: 0 0 50px orange;
            box-shadow: 0 0 50px orange;*/
}

JavaScript

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