html # 태그가있는 스크롤 애니메이션

저는 현재 페이지의 다른 섹션 ( '탭 콘텐츠'의 페이지 콘텐츠)에 액세스하기 위해 x 축을 가로 질러 움직이는 애니메이션을 적용하는 웹 사이트를 코딩하려고합니다. 헤더가 다른 navbar가 있습니다.이 문제가 해결되었습니다. 사용자가 각 헤더를 클릭하고 해당 섹션으로 이동하기를 원합니다. 일부 JS 코드를 사용하여 사용자를 원하는 섹션 / div로 안내했지만 선택한 섹션 / div가 갑자기 화면에 표시되는 기본 애니메이션이 없습니다. 순수 JS 또는 CSS로 어떻게 애니메이션을 적용합니까? 사용자를 해당 div로 이동 (모션)하려면 헤더를 클릭해야합니다. 저는 웹 개발자를 처음 사용합니다.

여기 내 코드 중 일부

HTML

<div class="main-info">
      <div class="nav-container">
         <div class="nav-bar">
            <ul>
               <li data-tab-target="#show" class="tab"><a href="#show">Show</a></li>
               <li data-tab-target="#about" class="tab"><a href="#about">About</a></li>
               <li data-tab-target="#lookbook" class="tab"><a href="#lookbook">Lookbook</a></li>
               <li data-tab-target="#process" class="tab"><a href="#process">Process</a></li>
            </ul>
         </div>
         <div class="info overlay">
            <div class="text">
               <a href="#">MA</a>
               <a href="#">Coming Soon</a>
               <a href="#">BA</a>
            </div>
            <a href="index.html" class="info-back">Back</a>
         </div>
      </div>
      <div class="tab-content">
         <div id="show" data-tab-content class="active">
            <p>VIDEO</p>
         </div>
         <div id="about" data-tab-content>
            <p>About</p>
         </div>
         <div id="lookbook" data-tab-content>
            <p>Lookbook</p>
         </div>
         <div id="process" data-tab-content>
            <p>Process</p>
         </div>
      </div>
   </div>

CSS

.main-info {
   background-color: transparent;
   height: 100vh;
   overflow: hidden;
}

.nav-container {
   position: fixed;

}

.nav-bar {
   width: 80vw;
   height: 10vh;
   left: 10vw;
   position: absolute;
   top: 5vh;

}

.nav-bar ul {

   text-transform: uppercase;
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: space-around;
}

.tab a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1rem;
   color: black;
   text-decoration: none;
}

.tab:hover {
   cursor: pointer;
   opacity: 0.6;
}

.tab.active {
   background-color: whitesmoke;
}



.info {
   width: 90vw;
   height: 10vh;
   /* border: 1px solid red; */
   left: 5vw;
   position: absolute;
   top: 80vh;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

.info a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.1rem;
   color: black;
   text-decoration: none;
   border: 1px solid teal;
}

.text {

   width: 30%;
   display: flex;
   justify-content: space-between;
}

.tab-content {
   border: 1px solid teal;
   position: absolute;
   left: 0;
   top: 0;
   height: 100vh;
   z-index: -11;
   display: flex;
   flex: row nowrap;
   justify-content: flex-start;


}


[data-tab-content] {
   border: 1px solid blueviolet;
   background-color: violet;
   font-size: 3rem;
   color: blue;
   scroll-behavior: smooth;
   display: none;
width: 100vw;
   height: 100vh;

}

.active[data-tab-content] {
   display: block;
}

JS

const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
   tab.addEventListener('click', () => {
      const target = document.querySelector(tab.dataset.tabTarget)

      tabContents.forEach(tabContent => {
         tabContent.classList.remove('active')
      })
      tabs.forEach(tab => {
         tab.classList.remove('active')
      });
      tab.classList.add('active')
      target.classList.add('active');

      
   });
});