Pulsate effect with jQuery and CSS transitions

Question

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.

Answer 1

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;
}