jQuery + Animate.css animation only working once, animation not resetting

Question

I'm trying to reproduce a specific animation each time a button is pressed.

Specifically, I'm using jQuery and the animate.css library for this effect: on button click, a class is added (two classes to be precise: fadeInDown animated) to the element I want to animate.

The animation does work correctly, but only once. Why is this?

Fiddle: http://jsfiddle.net/jqm4vjLj/2/

I want the animation to reset every time I click the button, even if it is halfway through completion from a previous click. It should also work whenever I click the button, not only once.

JS:

$("#button").click(function () {
    $("#button").removeClass();
    $("#button").addClass("fadeInDown animated");
});

Classes from animate.css:

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Answer 1

The simple solution for me is to start reflow process before adding class. You can do it for example by "change" width of element. I think reflow process is faster for browser then node reinserting. And its simpler in terms of coding. In jQuery:

$(this)
  .removeClass('myAnimation')
  .width('auto') // the magic
  .addClass('myAnimation')