title: Adding class via js won't trigger css animation
body: <p>I have a modified version of <code>animate.css</code> (added some delay, new timings and new positions), and it works really great when the classes are set by default (html document). But when I am adding the animate class dynamically via js, the animation is not executed! </p>
  
  <p>Even more annoying, I did have it working at some point, but I can't get it to work again (using gumby framework and inview js to add a class when the element is on screen (adding .animated)) . The left box had the classes already in the html, and the right box have the .animate class added by js.</p>
  
  <p>Example:<br>
  <a href="http://onepageframework.com/28_2_14/strange_anim.html" rel="noreferrer">http://onepageframework.com/28_2_14/strange_anim.html</a></p>
  
  <p>Any ideas why the right box is not animating? </p>
  
  <p>Using the Gumby inview extension: <a href="http://gumbyframework.com/docs/extensions/#!/inview" rel="noreferrer">http://gumbyframework.com/docs/extensions/#!/inview</a></p>
  
  <p>Edit: added html:</p>
  
  <pre><code>&lt;div class="six columns text-center fadeInLeftMedium delay_2 animated"&gt;
      &lt;!-- left box content here --&gt;
  &lt;/div&gt;
  &lt;div class="six columns text-center fadeInLeftMedium delay_2 inview" data-classname="animated"&gt;
      &lt;!-- right box content here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.animated {
      -webkit-animation-duration: 1s;
         -moz-animation-duration: 1s;
           -o-animation-duration: 1s;
              animation-duration: 1s;
      -webkit-animation-fill-mode: both;
         -moz-animation-fill-mode: both;
           -o-animation-fill-mode: both;
              animation-fill-mode: both;
  }
  
  .delay_2 {
      -webkit-animation-delay: 2s;
         -moz-animation-delay: 2s;
           -o-animation-delay: 2s;
              animation-delay: 2s;    
  }
  
  @-webkit-keyframes fadeInLeftMedium {
      0% {
          opacity: 0;
          -webkit-transform: translateX(-400px);
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0);
      }
  }
  @-moz-keyframes fadeInLeftMedium {
      0% {
          opacity: 0;
          -moz-transform: translateX(-400px);
      }
  
      100% {
          opacity: 1;
          -moz-transform: translateX(0);
      }
  }
  @-o-keyframes fadeInLeftMedium {
      0% {
          opacity: 0;
          -o-transform: translateX(-400px);
      }
  
      100% {
          opacity: 1;
          -o-transform: translateX(0);
      }
  }
  @keyframes fadeInLeftMedium {
      0% {
          opacity: 0;
          transform: translateX(-400px);
      }
  
      100% {
          opacity: 1;
          transform: translateX(0);
      }
  }
  
  .fadeInLeftMedium {
      -webkit-animation-name: fadeInLeftMedium;
      -moz-animation-name: fadeInLeftMedium;
      -o-animation-name: fadeInLeftMedium;
      animation-name: fadeInLeftMedium;
  }
  </code></pre>