Animated glowing border using CSS/ JS?

If this has to be a JS solution, the following will work for you.

CSS:

#myGlower {background-color: #ccc;border: 1px solid transparent; -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;-moz-transition: border 0.1s linear, box-shadow 0.1s linear;transition: border 0.1s linear, box-shadow 0.1s linear;}#myGlower.active {border-color: blue;-webkit-box-shadow: 0 0 5px blue;-moz-box-shadow: 0 0 5px blue;box-shadow: 0 0 5px blue;}

And then using jQuery:

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

You can see a jsFiddle here. While this is achievable using JS, you could also use CSS3 animations.

Also, you won't be able to get it to work in all browsers, as not all of them support the CSS properties that you mentioned (transitions, box shadow, etc.).

I'd like to amend BenM's accepted answer in two respects. The first is to provide a pure JavaScript answer for those like myself who expected JS rather than JQUery from the question. The second is to provide a smoother animated glow, without the jerks in the example.

Two changes are need for a smoother animation: the border should be 0px, not 1px, and the transition should be on both classes, active and default (I've specified it as "passive"). In addition, using a value for spread size and a longer time for the transition gives a more subtle effect. I don't see any need to do a transition on the border.

#myGlower.passive {border: 0px solid transparent; -webkit-transition: box-shadow 2s linear;-moz-transition: box-shadow 2s linear;transition: box-shadow 2s linear;}#myGlower.active {border-color: blue;-webkit-box-shadow: 0 0 10px 10px blue;-moz-box-shadow: 0 0 10px 1px blue;box-shadow: 0 0 10px 10px blue;/* in order: x offset, y offset, [blur size], [spread size], color */-webkit-transition: box-shadow 2s linear;-moz-transition: box-shadow 2s linear;transition: box-shadow 2s linear;}

For my animation I wanted to allow the user to set the animation to stop after a set number of cycles, or independently by user intervention. I also wanted the animation to stop in the non-glow state. The following code achieved that and can be modified to suit individual requirements.

 var done = false; // flag to prevent resumptionvar timer; // the setTimeout functionvar i = 0; // counter - must be outside startMe()var limit = 0; // number of times to repeat// call to start the animationfunction superStart(lim){limit = lim; // must set before startMe()startMe();}function startMe(){var glower = document.getElementById("myGlower");var currentClass = glower.className;if(done == false){if(currentClass == "passive"){glower.className = "active";}else{glower.className = "passive"; }i++;timer = setTimeout(startMe, 1000);if(i >= limit){stopMe();}}else{glower.className = "passive"; // finish with glow off}}// separate function to also allow user action to terminatefunction stopMe(){clearTimeout(timer);done = true;startMe(); // to start final cycle finishing in passive state}

I'm not actually sure if the clearTimeout() is required. (Works without it.)

Using JQuery and CSS animation,

One CSS animation for the increase when you first hover, one for the changing glow, and one for the decrease when the mouse leaves the box.

(If you don't want to use the plugin, you can use other methods.)

$('div.div').hover(function() {$(this).addClass('increase');setTimeout(function(){ $('div.div').removeClass("increase");$('div.div').addClass("glow");}, 1000);},function() {$(this).removeClass('increase');$(this).removeClass('glow');$(this).addClass('fade');setTimeout(function(){ $('div.div').removeClass("fade");}, 1000);});

html {background-color: black;}div {background-color: white;height: 100px;width: 100px;margin: auto;}.increase {animation: increase 1s ease-in-out;} .glow {animation: glow 5s ease-in-out 0s infinite;} .fade {animation: fade 1s ease-in-out;}@keyframes increase {to { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }}@keyframes glow {0% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }25% { box-shadow: 0 0 30px rgba(81, 203, 238, 1); }25%, 50% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }50%, 75% { box-shadow: 0 0 30px rgba(81, 203, 238, 1); }75%, 100% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }}@keyframes fade {from { box-shadow: 0 0 35px rgba(81, 203, 238, 1); }to { box-shadow: 0 0 0px rgba(81, 203, 238, 1); }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><div class="div"></div>

PS, I found out how to style the snippet 'console' when I was writing this:

$('div').hover();

div {background-color: blue;color: red;height: 100px;width: 100px;margin: auto;outline: none;border: 3px solid black;;}

If you don't want to use Jquery.

Pure Javascript:

var i = 0;var glow = document.getElementById('myGlower');setInternval(function(){if(i == 0)glow.setAttribute('class','myGlower');elseglow.removeAttribute('class');},1000);

Working Example: http://jsfiddle.net/7xvGp/1215/