CSS3 animation does not play again on removeClass followed by addClass but changes to toggleClass

Question

If I do this:

jQuery('#test').removeClass("change"); console.log(jQuery('#test').attr("class")); jQuery('#test').addClass("change"); 

CSS3 animate binding to this class is displayed only for the first time.

 .change { ... animation: redToTransparent 1s; animation-play-state: running; -webkit-animation: redToTransparent 1s; -webkit-animation-play-state: running; } 

Code in action : http://jsfiddle.net/adamovic/ato5akjx/

If you press the button several times, the animation will not be repeated. Why?

But it plays every second time when using .toggleClass() .

Browsers tested: Chrome, Firefox

Answer 1

There seems to be a delay between adding / removing classes.

Adding a 100ms delay seems to work in Chrome / FF / IE.

Updated example

 $('#mybutton').on('click', function () { $('#test').removeClass("change"); setTimeout(function () { $('#test').addClass("change"); }, 100); }); 

---

If you are using jQueryUI, you can also use the following:

Example here

 $('#mybutton').on('click', function () { $('#test').removeClass("change").addClass("change", 100); }); 

Answer 2

Yes, it looks like a sync problem. CSS tricks have a solution: reload the element on the page. http://css-tricks.com/restart-css-animation/

Since I hate working with timers and delays, it will look something like this:

 jQuery('#mybutton').click(function() { newone = jQuery('#test').clone(true); jQuery('#test').remove(); jQuery('.container').append(newone); newone.addClass('change'); });