gdebojyoti gdebojyoti -3 years ago 70
CSS Question

Animated glowing border using CSS/ JS?

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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download