title: Only play CSS animation when scroll over
body: <p>I have content on a page and half way through I have skill bars that are animated with CSS. I would like to play the animation only when the skill bars are in view.</p>
  
  <p>I tried using js and it worked when I used one skill bar. shown here: <a href="http://jsfiddle.net/pCgYe/6/" rel="nofollow">jsfiddle.net/pCgYe/6/</a></p>
  
  <p>But when I added more bars, it stopped working completely. Like here: <a href="http://jsfiddle.net/pCgYe/7/" rel="nofollow">jsfiddle.net/pCgYe/7/</a></p>
  
  <p>I know I have to add something to the js code, but I am not sure exactly what to add.</p>
  
  <pre><code>function isElementInViewport(){
              var scrollTop = $(window).scrollTop();
              var viewportHeight = $(window).height();
              $('.skiller #skill:not(.html5)').each(function(){
                  var top = $(this).offset().top;
                  console.log(top);
                  console.log(scrollTop + viewportHeight);
                  if(scrollTop + viewportHeight &gt;= top ){
                      $(this).find('.expand').addClass('html5');
                      console.log(true);
                  }else{
                      console.log(false);
                  }
              });
          }
  
  $(window).scroll(isElementInViewport);
  </code></pre>
  
  <p>If anyone can please guide me in the right direction.</p>
  
  <p>Thank you guys in advance!</p>