动画到单独的滚动部分

Question

在此处查看完整代码http://codepen.io/anon/pen/jWQOxa

在上面的代码笔中，我试图将动画应用于不同的滚动部分。 但是，当我打开应用程序时，所有各个部分都同时执行动画。 它不会等到它真正进入用户的视野。 因此，我想应用相同的动画并使它仅在进入用户视图时才执行。 请让我知道如何实现这一目标。 提前致谢！

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>

CSS：

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

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

Answer 1

我有快速的hack解决方案，而不是这么长的解决方案。 我使用了animate.css和wow.js。 并且这按预期工作。 您可以在此处查看示例： http : //codepen.io/anon/pen/obJqqm

      <div class="row" >
        <div class="aboutanimate">
          <div id="about" class="section scrollspy">
            <div class="container">
               <h2 class="wow animated shake" style="text-decoration:underline;text-align:center;font-weight:bold;font-family:Comic Sans MS">About Us</h2><br><br>
               <div class="quot animated shake">
                 <h5 style="color:#446CB3;padding-top:30px;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Vision</h5>
                  <p id="vision">"Lorem ipsem Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem</p>
                  <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Mission</h5>
                  <p id="vision">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p>
                  <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Objectives</h5>
                  <p id="vision">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p><br><br><br>
                  </div>
                </div>
             </div>
         </div><br><br>