JSとCSSをつかって同じアニメーションを繰り返し作動させたい

前提・実現したいこと

スクロールして指定した位置に来ると画像がふわっと浮き出てくるものを、同じページで複数使いたいです。

発生している問題・エラーメッセージ

一番最初しか作動せず、二個目以降は常に非表示になってしまいます。

該当のソースコード

$('#animation').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#animation').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown");
  }
 });
});


$('#animation2').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#animation2').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 50){
   $(this).addClass("fadeInDown2");
  }
 });
});

$('#animation3').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#animation3').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown3");
  }
 });
});

$('#animation4').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#animation4').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown4");
  }
 });
});

  @-webkit-keyframes fadeInDown {
     0% { opacity: 0; -webkit-transform: translateY(-20px); }
     50% { opacity: 0; -webkit-transform: translateY(-10px); }
     100% { opacity: 1; -webkit-transform: translateY(0); }
 }
  @keyframes fadeInDown {
     0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
     50% { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }
     100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
   }

.box{
   visibility: hidden;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
.fadeInDown2 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 animation-delay:0.3s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

.fadeInDown3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 animation-delay:0.6s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

.fadeInDown4 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 animation-delay:0.9s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

<div class="box">
      <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div>
</div>
<div class="box">
      <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div>
    </div>
<div class="box">
      <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div>
      <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div>
    </div>

補足情報

imgのソースは消してありますが実際ははいっています。
HTMLとCSSは初心者程度の知識でjsは全く知識がないのでどうしたらいいのか全く分かりません。
調べるにもどう調べたらいいのか分からず、教えていただけると助かります。
またふわっと浮き出てくる動きは同じアニメーションを使っているのですがjsもつかったときの
まとめて書く書き方が分からず、仕方なくひとつずつ書きました。
まとめて書く方法がありましたら教えていただきたいです。