Animated glowing border using CSS/ JS?

css, javascript

Solution

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.).

Problem

Is it possible to use JS to automatically and continuously change a particular CSS property? I want to create glowing border whose glow continuously brightens and dampens (using 3 properties to achieve this effect - border, box shadow, inset box shadow). How can I do so? Please note that I am not talking about using "hover" or "active" states. Also I want it to work in all browsers, if possible.

Original source

Related problems