Question

47

Animated glowing border using CSS/ JS?

rated 0 times [ 51] [ 4] / answers: 1 / hits: 26721 / 12 Years ago, thu, february 21, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

cadendericki questions

1 ERROR TypeError: Cannot read properties of undefined (reading 'phones')

Tue, Mar 22, 22, 00:00, 2 Years ago

1 firefox browser does not start in playwright

Wed, Apr 7, 21, 00:00, 3 Years ago

1 React Creating Dynamic Select and Option Elements with Material-UI

Wed, Jan 27, 21, 00:00, 3 Years ago

1 How to use the vue router in another file?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 Format column header dates in FullCalendar

Thu, May 14, 20, 00:00, 4 Years ago

View All

answered 12 Years ago julieth · Accepted Answer

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