用户看到内容时激活进度条JS动画

Question

因此，我实际上在论坛和Google上花费了数小时，试图找到与我相似的案例，但无法对其进行任何罚款。我将ProgressBar.js库用于进度条的动画，当用户实际看到它们时，我找不到如何对其进行动画处理。他们会在用户真正获得内容之前就获得动画效果，这是我的代码

   <div class="tech-skills" class="tech">

        <div>
            <h3>Cloud Computing</h3>
            <div id="cloud" class="cloud"></div>
        </div>

        <div>
            <h3>Infrastructure</h3>
            <div id="infra" class="infra"></div>
        </div>

        <div>
            <h3>Windows Azure</h3>
            <div id="azure" class="azure"></div>
        </div>

        <div>
            <h3>DevOps</h3>
            <div id="devops" class="devops"></div>
        </div>

        <div>
            <h3>Pre-Sales</h3>
            <div id="sales" class="sales"></div>
        </div>

</div>

JS代码

   var cloudcomputing = new ProgressBar.Line('#cloud', {
     color: '#4AAACA',
     duration: 3000,
     easing: 'easeInOut',
     text: {
    // Initial value for text.
    // Default: null
    value: '94%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }

    }
  });

  cloudcomputing.animate(0.95);

  // Second 

     var infrastructure = new ProgressBar.Line('#infra', {
       color: '#4AAACA',
       duration: 3000,
       easing: 'easeInOut',
       text: {
    // Initial value for text.
    // Default: null
    value: '80%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',

    }

       }
  });

  infrastructure.animate(0.8);


   // Third 

     var windowsazure = new ProgressBar.Line('#azure', {
       color: '#4AAACA',
       duration: 3000,
       easing: 'easeInOut',
       text: {
    // Initial value for text.
    // Default: null
    value: '83%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }

   }
 });

    windowsazure.animate(0.83);

  // Fourth


    var devops = new ProgressBar.Line('#devops', {
color: '#4AAACA',
duration: 3000,
easing: 'easeInOut',
text: {
    // Initial value for text.
    // Default: null
    value: '80%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }

   }
 });

   devops.animate(0.8);

 // Fifth 

    var presales = new ProgressBar.Line('#sales', {
       color: '#4AAACA',
       duration: 3000,
       easing: 'easeInOut',
       text: {
    // Initial value for text.
    // Default: null
       value: '73%',
       style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }
      }
     });

      presales.animate(0.7);


     // Personal Skills Animation

    // First




var vision = new ProgressBar.Circle('#vision', {
    color: 'url(#gradient1)',
    duration: 3000,
    easing: 'easeInOut',
    strokeWidth: 3,
    text: {
        // Initial value for text.
        // Default: null
        value: '83%',
        style:{

            position: 'absolute',
            left: '48.5%',
            top: '40%',
        }

    }

});
vision.svg.insertAdjacentHTML('afterbegin', Gradient1);   
vision.animate(0.84);

// Second

var active = new ProgressBar.Circle('#listening', {
    color: 'url(#gradient2)',
    duration: 3000,
    easing: 'easeInOut',
    strokeWidth: 3,
    text: {
        // Initial value for text.
        // Default: null
        value: '95%',
        style:{
            position: 'absolute',
            left: '40%',
            top: '40%',
        }

    }
});
active.svg.insertAdjacentHTML('afterbegin', Gradient2);   
active.animate(0.9);

// Third

var problem = new ProgressBar.Circle('#solving', {
    color: 'url(#gradient3)',
    duration: 3000,
    easing: 'easeInOut',
    strokeWidth: 3,
    text: {
        // Initial value for text.
        // Default: null
        value: '75%',
        style:{
            position: 'absolute',
            left: '40%',
            top: '40%',
        }

    }
});

problem.svg.insertAdjacentHTML('afterbegin', Gradient3);   
problem.animate(0.8);