스크롤시에 효과가 안뜨고, 미리 떠버리는 현상...

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Reveal Animation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="js/wow.min.js"></script>
  <style>
    .parent {
      width: 800px;
      border: 1px solid #000;
      padding: 20px;
      overflow: hidden;
    }
    .parent div {
      float: left;
      width: 50%;
      height: 200px;
      border: 3px solid red;
      box-sizing: border-box;
      line-height: 200px;
      text-align: center;
      font-size: 3em;
    }
    .ltr {
      animation: ltr 1s linear both;
    }
    .rtl {
      animation: rtl 1s linear both;
    }

   @keyframes ltr{
    0% {
      opacity: 0;
      transform: translateX(-150px);
      }  
    100% {
      opacity: 1;
      transform: translateX(0);
      }
    }
   @keyframes rtl{
    0% {
      opacity: 0;
      transform: translateX(150px);
      }
    100% {
      opacity: 1;
      transform: translateX(0);
      }
    }
  </style>
</head>
<body>

  <h1>스크롤시 애니메이션 넣기</h1>
  <img src="http://via.placeholder.com/300x800">
  <div class="parent">
   <div class="left wow ltr">left</div>
    <div class="right wow rtl">right</div>  
  </div>
  <script>
    new WOW().init();
  </script>

</body>
</html>

스크롤시 효과가 뜨는게 아니라, 그냥 미리 떠버립니다. .

아예 처음부터 다시 시작하면서 계속 오류 찾아도 보이지 않아요ㅠㅠ

인프런 커뮤니티 질문&답변