How to start CSS3 animation when it is in view port

How to start CSS3 animation when it is in view port

I have a bar chart that animates with CSS3 and the animation currently
activates as the page loads.
Since the bar chart isn't in view when page loads, you'd have to scroll
down to see it and by the time you get to it, the animation has already
loaded. So what I am trying to do is, have the CSS3 animation activate
when someone scrolls to it by using js.
Here is a sample of what I am trying to do:
jsfiddle.net
I think I am miss something or doing something wrong in .js and .css.
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.skiller #skill');
// If the animation has already been started
if ($elem.hasClass('html5')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('html5');
}
}
Thank you guys in advance!