Question

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

在上面的 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>

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

我有快速解决方案，而不是这么长的解决方案。我使用了animate.css和wow.js.这与预期一样有效。你可以在这里看到一个例子： http://codepen.io/anon/pen/obJqqm

{{1}}

动画到个别滚动部分

1 个答案: