Q:

Animation to individual scroll section

Check full code here http://codepen.io/anon/pen/jWQOxa
In the above codepen I am trying to apply animation to different scroll sections. But when I open the application all the individual sections perform animation at same time. It does not wait till it actually comes into user's view. So I want to apply same animation and make it perform only when it comes into user's view. Please let me know how can I achieve this. Thanks in advance!
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%;
    }
}

A:

I have got quick hack solution instead of such a long solution. I have used animate.css and wow.js. And this works just as expected.
 You can see an example here : 
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>

