title: Don't start animation until in view
body: <p>I was wondering how I could stop an animation from starting until it has been scrolled in to full view. I am using a plugin, <a href="http://daneden.github.io/animate.css/" rel="nofollow">animate.css by Dan Eden</a> to animate my elements. I have added the animation and it works perfectly but I need to know how to make it only start once it is in full view. </p>
  
  <p>This is the code for the element I have animated using class:</p>
  
  <pre><code>&lt;div class="animated fadeInUp" id="enter-title"&gt;&lt;img src="/images/welcome-text/enter.png" width="473" height="227"/&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the animation code:</p>
  
  <pre><code>@-webkit-keyframes fadeInUp {
  0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
  }
  
  100% {
      opacity: 1;
      -webkit-transform: translateY(0);
  }
  
  .animated.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
  }
  </code></pre>