Question

我在我网站上的div上使用了一个简单的animate.css动画。一切正常但是我想在用户滚动到网站上的特定部分时触发动画，而不是在网站加载后立即运行的动画。

这是到目前为止的代码：

＆＃13;

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

＆＃13;

<div data-anchor="intro-section-1" class="section intro-section-1">
  <div class="float-left ">
    <div id="executive-nav">
      <p onclick="openSideNavBlue()" class="nav-section-title">Executive Summary</p>
    </div>
    <div class="intro-text animated bounce">
      <p>It’s our sixth annual report and as the years go by, each iteration becomes an increasingly useful snapshot that captures the IT landscape both as it was over the last 12 months, and in transition from the years before it.
        <br>
        <br>There are 48 fewer respondents in this year’s survey than in 2015, although the number of respondents vary between large, medium and small organisations has stayed relatively consistent.
    </div>
  </div>
  <div class="float-right">
    <p class="intro-title">Welcome to
      <br>the 2016
      <br>Databarracks
      <br>Data Health
      <br>Check</p>
    <a href="#intro-section-2">
      <img class="blue-arrow" src="img/blue-arrow.svg">
    </a>
  </div>
</div>

＆＃13;

Answer 1

请参阅此小提琴http://jsfiddle.net/apaul34208/ozww5cvj/18/

基本思想是创建一个容器。在该容器中给出了一些关于动画确切位置的规范I.E

var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();

您希望遍历此操作，然后使用if语句检查边界条件。如果它确实位于边界内，您可以添加class，其中包含转换所需的信息。我把工作小提琴放在最上面。

Answer 2

我在css上不是最好的，但也许你可以尝试使用jQuery来制作动画？它基本上可以是你喜欢的任何动画，例如slideIn，fadeIn等，你可以用if语句轻松定义它。

如何在用户滚动到页面部分时触发动画

2 个答案: