아래의 소스는 메인페이지에 배너가 fadein 되면서 해당 텍스트도 움직이면서 나오게 하는 소스입니다.

그런데 첫번째 배너에서만 움직이는 텍스트가 정상적으로 나오고, 두번째부터는 텍스트가 움직임 없이 나오네요. 어디를 손봐야 할까요? 조언 부탁드립니다.

<style>

@keyframes up {

    0% { transform:translateY(20px); opacity:0; }

    100% { transform:none; opacity:1 }

}

@keyframes down {

    0% { transform:translateY(-20px); opacity:0; }

    100% { transform:none; opacity:1 }

}

</style>

<div class="visual_slider" id="visual" style="position:relative">

  <div class="main-carousel owl-carousel">

  <div class="li img01">

      <div class="copy_area_wrap">

        <div class="copy_area">

          <h2 style="animation:up .5s .4s forwards; opacity:0;"><strong>text</strong></h2>

        </div>

      </div>

      <p class="cover"></p>

    </div>
 

    <div class="li img02">

      <div class="copy_area_wrap">

        <div class="copy_area">

          <h2 style="animation:up .5s .4s forwards; opacity:0;"><strong>text</strong></h2>

        </div>

      </div>

      <p class="cover"></p>

    </div>

  </div>

</div>

<script>

  $(document).ready(function() {

    $('.main-carousel').owlCarousel({

      items: 1, //보여줄 이미지 갯수

      nav: true,

      loop: true,

      autoplay: true,

      autoplayTimeout: 9000,

      navText: ["PREV", "NEXT"],

      animateIn: 'fadeIn', 

      animateOut: 'fadeOut' 

    });

    jarallax(document.querySelectorAll('.jarallax'));

  });

</script>