How to twinkle shadow using jQuery?

Question

I am a newbie and I was trying to figure out on how to twinkle box-shadow on an element but I couldn't.

So far I got this.

Theoretically, it's supposed to work. I used setInterval inside for loop but it didn't work. Also, I think I got some issues with toggle function.

The main point is that when page starts loading I want that element's box-shadow to start twinkling from very fast to very slow and eventually it would stop.

Do you have any suggestions?!

Answer 1

I agree with Praveen Vijayan. Here is a showcase with css3 key-frames: http://jsfiddle.net/ufP7h/

@-webkit-keyframes twinkly {
    0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}
@-moz-keyframes twinkly  {
     0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}
@-ms-keyframes twinkly  {
     0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}

#twinkle {
    -webkit-animation: twinkly 1s alternate infinite;
    -moz-animation: twinkly 1s alternate infinite;
    -ms-animation: twinkly 1s alternate infinite;
}

​