Problem with animation

HTML-CSS
1 
  $("#axios,#jquery").click(function(){
//quriios as to what the below code does or how it works. Specifically 
  var el = document.getElementById('quoteSection');
  el.style.animation = 'none'; //this line of code
  el.offsetWidth; /* trigger reflow */ //this line of code
  el.style.animation = null;  //and this line of code
  });

i had a question about the above. I am using this code to make my animation start over after each click
It does work but I dont know why or how it works.

Can this be done using JQuery?
I changed the current code in my project to use Jquery fadeIn property and it does look nicer, but i still want to know what the above code does.
link to codpen

2

Did you get it from this stackoverflow post?

Just set the animation property via JavaScript to “none” and then set a timeout that changes the property to “”, so it inherits from the CSS again.

No need in timeout, use reflow to apply the change:

I believe the reflow causes styles to be recalculated

// Set animation to none, i.e. remove the animation
el.style.animation = 'none';

// reflow causes styles to be recalculated
el.offsetWidth;

// Changes the property to "", so it inherits from the CSS again.
el.style.animation = null;
or
el.style.animation = "";
3

Not sure how to chain the last 3 calls in jquery, but this seems to work.

$("#axios,#jquery,#xhrReq").click(function() {
  $("#quoteSection")
    .stop(true)
    .addClass("fadeInLeft")
    .on("animationend webkitAnimationEnd oAnimationEnd")
    .removeAttr("style");
  $("#quoteSection").css("animation", "none");
  $("#quoteSection").offset();
  $("#quoteSection").css("animation", "");
});