This question has already been answered:

I add an element to the class for which the animation is set. After adding the animation does not want to turn on. Enabled only if you add a class via setTimeout . Here is an example: http://jsfiddle.net/8vqg8gh8/

 jQuery('.b').on('click', function() { var element = jQuery('.a'); element.removeClass('a'); element.addClass('a'); }); 
 @keyframes anim { 0% {width: 0px; height: 0px;} 100% {width: 100px; height: 100px;} } .a { width: 100px; height: 100px; border: 1px solid black; animation: anim 0.5s; } .b { cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "a"></div> <span class = "b">Перезапустить</span>

Reported as a duplicate by Qwertiy ♦ , Vladimir Glinskikh , tutankhamun , Nick Volynkin ♦ , Community Spirit ♦ 27 Aug '15 at 8:04 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • 3
    Possible duplicate question: Time to finalize CSS properties - Qwertiy ♦
  • And why is there animation at all if you can get by with a transition? - Qwertiy ♦

1 answer 1

 jQuery('.b').on('click', function() { var element = jQuery('.a'); element.removeClass('a'); element.width(); // Force reflow element.addClass('a'); }); 
 @keyframes anim { 0% {width: 0px; height: 0px;} 100% {width: 100px; height: 100px;} } .a { width: 100px; height: 100px; border: 1px solid black; animation: anim 0.5s; } .b { cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "a"></div> <span class = "b">Перезапустить</span>

  • And why without calculating the width of the element and then discarding the result, the animation does not work? - mymedia
  • @mymedia, I even wrote a comment there: "Force reflow" . If we removed the class and immediately added it again, then nothing would change and there is nothing to animate. If we removed the class, asked the browser something (like ay, count what you have there now), and then added it again, now the browser is animating what has changed after the question. - Qwertiy ♦