Javascript 动画到单个滚动部分

在这里检查完整代码

在上面的codepen中，我尝试将动画应用到不同的滚动部分。但当我打开应用程序时，所有单独的部分同时执行动画。它不会等到它真正进入用户的视野。所以我想应用相同的动画，并使其仅在进入用户视图时执行。请让我知道如何才能做到这一点。提前谢谢

HTML5:

   <div class="navbar-fixed">
    <nav>
     <div class="nav-wrapper light-blue darken-4">
      <a href="#" class="brand-logo">hallo</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
       <ul class="right hide-on-med-and-down section table-of-contents">
          <li><a href="#about" style="color:#">About Us</a></li>
          <li><a href="#features" style="color:">Features</a></li>
          <li><a href="#team" style="color:">Our Team</a></li>
          <li><a href="#contact" style="color:">Contact Us</a></li>
        </ul>

   <div class="aboutanimate" id="about">
    <h1>Watch me move-1</h1>
      <p>
        This example shows how to use CSS animations to make <code>H1</code>
         elements move across the page.
      </p>
       <p>In addition, we output some text each time an animation event fires,so you can see them in action.</p>
    </div>

  <div class="featuresanimate" id="features">
     <h1>Watch me move-2</h1>
       <p>This example shows how to use CSS animations to make   <code>H1</code>elements move across the page.</p>
       <p>In addition, we output some text each time an animation event   fires,so you can see them in action.</p>
  </div>

  .aboutanimate,.featuresanimate,.teamanimate,.contactanimate {
    animation-duration: 1s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%; 
    }
    to {
        margin-left: 0%;
        width: 100%;
    }
}

CSS:

   <div class="navbar-fixed">
    <nav>
     <div class="nav-wrapper light-blue darken-4">
      <a href="#" class="brand-logo">hallo</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
       <ul class="right hide-on-med-and-down section table-of-contents">
          <li><a href="#about" style="color:#">About Us</a></li>
          <li><a href="#features" style="color:">Features</a></li>
          <li><a href="#team" style="color:">Our Team</a></li>
          <li><a href="#contact" style="color:">Contact Us</a></li>
        </ul>

   <div class="aboutanimate" id="about">
    <h1>Watch me move-1</h1>
      <p>
        This example shows how to use CSS animations to make <code>H1</code>
         elements move across the page.
      </p>
       <p>In addition, we output some text each time an animation event fires,so you can see them in action.</p>
    </div>

  <div class="featuresanimate" id="features">
     <h1>Watch me move-2</h1>
       <p>This example shows how to use CSS animations to make   <code>H1</code>elements move across the page.</p>
       <p>In addition, we output some text each time an animation event   fires,so you can see them in action.</p>
  </div>

  .aboutanimate,.featuresanimate,.teamanimate,.contactanimate {
    animation-duration: 1s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%; 
    }
    to {
        margin-left: 0%;
        width: 100%;
    }
}

---

我有一个快速的解决方案，而不是这么长的解决方案。我使用了animate.css和wow.js。这和预期的一样有效。 您可以在此处看到一个示例：

关于我们


视野
“Lorem ipsem Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem
使命
“Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem”
目标
“Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem”

滚动时需要添加这些类（

window.scrollTop

=

element.offset（）.top

）-不是从一开始就添加