title: Repeating animation loop with animate.css
body: <p>I am animating my elements with <strong><a href="https://github.com/daneden/animate.css" rel="nofollow">animate.css</a></strong> and I have codes similar to this:</p>
  
  <pre><code>&lt;button class='animated infinite pulse tada'&gt;1&lt;/button&gt;
  &lt;button class='animated infinite pulse tada'&gt;2&lt;/button&gt;
  &lt;button class='animated infinite pulse tada'&gt;3&lt;/button&gt;
  &lt;button class='animated infinite pulse tada'&gt;4&lt;/button&gt;
  &lt;button class='animated infinite pulse tada'&gt;5&lt;/button&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ybyuubed/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>How do I animate the buttons 1 by 1 and repeat? like for example the first button animate for a specific duration first and then the 2nd and 3rd and so on until button 5 and after that all of them animate together then finally repeat the whole process again infinitely.</p>
  
  <p>From the github documentation it says: "You can also detect when an animation ends" with Jquery .one function. But I still have no idea what to do with it to achieve my goal.</p>