Animated glowing border using CSS/ JS?

Question

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 1

Manipulating the above answer for CSS only solution

@-webkit-keyframes glow {
    to {
         border-color: #69c800;
    -webkit-box-shadow: 0 0 5px #69c800;
       -moz-box-shadow: 0 0 5px #69c800;
            box-shadow: 0 0 5px #69c800;
    }
}

.myGlower {
    background-color: #ccc;
    border: 1px solid transparent;
    -webkit-animation: glow 1.0s infinite alternate;  
     -webkit-transition: border 1.0s linear, box-shadow 1.0s linear;
       -moz-transition: border 1.0s linear, box-shadow 1.0s linear;
            transition: border 1.0s linear, box-shadow 1.0s linear;
    width: 100px;
    height: 100px;
    margin: 50px;
}