<!-- 高さを与えてるだけ -->
  <div class="scroll-test"></div>
  <!-- アニメーションさせる要素ここから -->
  <div class="scroll-animation">
    <div class="box wow bounceIn" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >bounceIn</div>
    <div class="box wow flash" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >flash</div>
    <div class="box wow fadeIn" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >fadeIn</div>
    <div class="box wow bounceInDown" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >bounceInDown</div>
  </div>
  <!-- アニメーションさせる要素ここまで -->

  <!-- ライブラリ読み込み -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" media="all" >
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
.scroll-test {
  height: 1500px;
}

.scroll-animation {
  /* アニメーションさせる要素のスタイル */
  .box {
    border: 2px solid blue;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 1.5em;
    max-width: 100%;
    padding: 1em;
  }
}
View Compiled
/* wowの設定 */
new WOW().init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.