Only play CSS animation when scroll over

Only play CSS animation when scroll over

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.
I tried using js and it worked when I used one skill bar. shown here:
jsfiddle.net/pCgYe/6/
But when I added more bars, it stopped working completely. Like here:
jsfiddle.net/pCgYe/7/
I know I have to add something to the js code, but I am not sure exactly
what to add.
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 >= top ){
$(this).find('.expand').addClass('html5');
console.log(true);
}else{
console.log(false);
}
});
}
$(window).scroll(isElementInViewport);
If anyone can please guide me in the right direction.
Thank you guys in advance!