Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pulsate effect with jQuery and CSS transitions

I'm trying to achieve an effect in which a background color is pulsated when a condition is me. So I have:

<div class="box">...</div>

.box {
    background-color: #fff;
    transition: background-color 0.5s ease-out;
}
.box.active {
    background-color: #ccc;
}

So now I want to use jQuery to add and remove that class a couple times to create a background-color pulsating effect. Something like:

$('.box').addClass('active').delay(1000).removeClass('active').delay(1000).addClass('active');

This, in theory, should create the pulsating effect but it doesn't. What happens is that the 'active' class is added and is never removed or added again. It's almost like the first 'removeClass' is never triggered.

I'm missing something, but not sure what. Maybe it has something to do with CSS transition timing, but they should be independent of each other, right?

Thanks for any ideas.

like image 628
dmathisen Avatar asked Feb 11 '13 16:02

dmathisen


1 Answers

Delay only works with animations, not adding and removing classes. Also, you can pulsate using keyframes in CSS:

@keyframes pulse { 
  50% { background-color: #ccc }
}

.box {
  animation: pulse .5s ease-out 2;
}
like image 172
moettinger Avatar answered Sep 23 '22 15:09

moettinger