如何在滚动而不是页面加载时执行动画

Question

我有一个简单的进度条，其中包含加载动画。问题是，动画将在页面加载时加载，并且在我向下滚动到进度条时，动画已经完全加载。当我到达进度栏时，如何显示动画。

$(document).ready(function(){
	$('.html').animate({width:'85%'},2000);
	$('.css').animate({width:'80%'},2000);
	$('.js').animate({width:'40%'},2000);
});

<section id="skills" class="skills">
      <div class="progress-wrap">
        <div class="progressBar">
          <div class="barTitle htmlColor color">HTML5</div>
          <div class="progress html"></div>
          <div class="progressValue">90%</div>
        </div>
        <div class="progressBar">
          <div class="barTitle cssColor color">CSS3</div>
          <div class="progress css "></div>
          <div class="progressValue">80%</div>
        </div>
        <div class="progressBar">
          <div class="barTitle jsColor color">Java Script</div>
          <div class="progress js"></div>
          <div class="progressValue">40%</div>
        </div>
</section>