スクロール動作に連動してアニメーションするjQurey&CSS実装 （スライドイン・フェードイン）

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.js"></script>
  <script src="script/script.js"></script>

    <section class="dummy dummy--wide">
      <h2 id="second" class="title">2番目の猫 右からフェードイン</h2>
      <div class="content">
        <p class="content__text">ダミーテキストです。〜ダミーテキストです。</p>
        <div class="js-fade-animation content__image">
          <img class="imageCat" src="./images/cat_02.jpg" alt="cat">
        </div>
      </div>
    </section>

    <section class="dummy dummy--wide">
      <h2 id="third" class="title">3番目の猫 右から連続フェードイン</h2>
      <p class="text">ダミーテキストです。〜ダミーテキストです。</p>
      <ul class="js-fade-animation list">
        <li class="item"><img class="imageCat" src="./images/cat_03.jpg" alt="cat"></li>
        <li class="item"><img class="imageCat" src="./images/cat_04.jpg" alt="cat"></li>
        <li class="item"><img class="imageCat" src="./images/cat_05.jpg" alt="cat"></li>
      </ul>
    </section>

    <section class="dummy dummy--wide">
      <h2 id="third" class="title">4番目の猫 下から連続フェードイン</h2>
      <p class="text">ダミーテキストです。〜ダミーテキストです。</p>
      <ul class="js-fade-animation fadelist">
        <li class="fadeitem"><img class="imageCat" src="./images/cat_06.jpg" alt="cat"></li>
        <li class="fadeitem"><img class="imageCat" src="./images/cat_07.jpg" alt="cat"></li>
        <li class="fadeitem"><img class="imageCat" src="./images/cat_08.jpg" alt="cat"></li>
      </ul>
    </section>

.content__image {
  width: 50%;
  margin: 10px;
  transform: translateX(50%);
  opacity: 0;
  transition: all 0.75s ease-in-out 0.5s;
}

.content__image.is-show {
  transform: translateX(0);
  opacity: 1;
}

.item {
  margin: 10px;
  transform: translateX(50%);
  opacity: 0;
}

.item:nth-child(1) {
  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: all 0.75s ease-in-out 0.5s;
}
.item:nth-child(2) {
  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: all 0.75s ease-in-out 0.75s;
}
.item:nth-child(3) {
  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: all 0.75s ease-in-out 1s;
}

.list.is-show .item {
  transform: translateX(0);
  opacity: 1;
}

.fadeitem {
  margin: 10px;
  transform: translateY(25%);
  opacity: 0;
}

.fadeitem:nth-child(1) {
  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: all 0.5s ease-in-out 0.5s;
}
.fadeitem:nth-child(2) {
  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: all 0.5s ease-in-out 0.75s;
}
.fadeitem:nth-child(3) {
  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: all 0.5s ease-in-out 1s;
}

.fadelist.is-show .fadeitem {
  transform: translateY(0);
  opacity: 1;
}

$(function() {
  // ①アニメーションさせる要素を取得
  var $targetElements = $('.js-fade-animation');

  // アニメーションさせる要素があるとき
  if ($targetElements.length) {
    // アニメーションさせる要素の高さを取得(複数ある場合を考えて配列で保存)
    var fixedOffsets = $targetElements.map(function(index, element) {
      return $(element).offset().top;
    });
    // windowを取得
    var $window = $(window);
    // ②画面の高さを取得
    var windowHight = $window.height();

    // ③resizeイベント
    $window.on('resize', $.throttle(250, function() {
      // 画面の高さを再取得
      windowHight = $window.height();

      // Offsetを再取得
      fixedOffsets = $targetElements.map(function(index, element) {
        return $(element).offset().top;
      });
    }));

    // ④スクロールイベント
    $window.on('scroll', $.throttle(250, function() {
      // スクロール位置を取得
      var scrollTop = $(this).scrollTop();

      // .js-fade-animationの要素をすべてチェックする
      fixedOffsets.each(function(index, offset) {
        // ⑤アニメーションさせる要素の位置よりも下にスクロールされているとき
        if (scrollTop + windowHight > offset) {
          // ⑥要素をアニメーションさせる (.is-showを付与)
          $targetElements.eq(index).addClass('is-show');

          // ⑦アニメーション後は監視対象から外す
          fixedOffsets.splice(index, 1);
          $targetElements.splice(index, 1);
        }
      });
    }));
  }
});

      // .js-fade-animationの要素をすべてチェックする
      fixedOffsets.each(function(index, offset) {
        // アニメーションさせる要素の位置よりも下にスクロールされているとき
        if (scrollTop + windowHight > offset) {
          // 要素をアニメーションさせる (.is-showを付与)
          $targetElements.eq(index).addClass('is-show');
          return;
        }

        // アニメーションさせる要素の位置よりも上のときは.is-showを削除
        $targetElements.eq(index).removeClass('is-show');
      });

$(function() {
  // アニメーションさせる要素を取得
  var $targetElements = $('.js-fade-animation');

  // アニメーションさせる要素があるとき
  if ($targetElements.length) {
    // アニメーションさせる要素の高さを取得(複数ある場合を考えて配列で保存)
    var fixedOffsets = $targetElements.map(function(index, element) {
      return $(element).offset().top;
    });
    // windowを取得
    var $window = $(window);
    // 画面の高さを取得
    var windowHight = $window.height();

    // resizeイベント
    $window.on('resize', $.throttle(250, function() {
      // 画面の高さを再取得
      windowHight = $window.height();

      // Offsetを再取得
      fixedOffsets = $targetElements.map(function(index, element) {
        return $(element).offset().top;
      });
    }));

    // スクロールイベント
    $window.on('scroll', $.throttle(250, function() {
      // スクロール位置を取得
      var scrollTop = $(this).scrollTop();

      // .js-fade-animationの要素をすべてチェックする
      fixedOffsets.each(function(index, offset) {
        // アニメーションさせる要素の位置よりも下にスクロールされているとき
        if (scrollTop + windowHight > offset) {
          // 要素をアニメーションさせる (.is-showを付与)
          $targetElements.eq(index).addClass('is-show');

          // アニメーション後は監視対象から外す
          fixedOffsets.splice(index, 1);
          $targetElements.splice(index, 1);
        }
      });
    }));
  }
});