JQuery - CSS glow animation

by Ayyappan Sakthivadivel

HTML

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

CSS

/* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow {
  to {
    /*-webkit-transform: scale(1.1);
    transform: scale(1.1);*/
      -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);
  }
}
@keyframes hvr-pulse-grow {
  to {
    /*-webkit-transform: scale(1.1);
    transform: scale(1.1);*/
      /*-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);*/
    -webkit-filter: drop-shadow(0 0 10px #f00);
 filter: drop-shadow(0 0 10px #f00); 
  }
}
.hvr-pulse-grow {
  margin: 50px;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}