Помогите с анимацией пожалуйста

почему меню появляется моментально, а не плавно?

<header>
      <div class="container">
          <div class="header__content">
              <div class="header__logo">
                  <img src="../dist/img/svg/logo.svg" alt="#">
              </div>
              <div class="header__nav" id="mobileMenu">
                   <nav>
                       <ul>
                           <li><a href="#">Как это работает?</a></li>
                           <li><a href="#">Для кого</a></li>
                           <li><a href="#">Кейсы</a></li>
                           <li><a href="#">Тарифы</a></li>
                           <li><a href="#">Безопасность</a></li>
                           <li class="header___link_mobile"><a href="#">Контакты</a></li>
                           <li class="header___link_mobile"><button class="header___link_button">Вход</button></li>
                       </ul>
                   </nav>
                   <div class="header__lang">
                       <a href="#">RU</a>
                       <a href="#">EN</a>
                   </div>
                   <div class="header__button">
                       <button>Подключиться</button>
                   </div>
              </div>
              <div class="header__burger burger" id="burgerButton">
                  <div class="burger__line"></div>
                  <div class="burger__line"></div>
              </div>
          </div>
          <!-- <div class="header__nav_mobile">
              <nav>
                       <ul>
                           <li><a href="#">Как это работает?</a></li>
                           <li><a href="#">Для кого</a></li>
                           <li><a href="#">Кейсы</a></li>
                           <li><a href="#">Тарифы</a></li>
                           <li><a href="#">Безопасность</a></li>
                       </ul>
                   </nav>
          </div> -->
      </div>
   </header>
.header__nav{
   display: flex;
   nav{
       display: none;
       transform: translateY(-1000px);
       transition: all 1s linear;
   }
}
.header__nav_active{
   overflow-y: hidden;
   nav{
       transform: translateY(38px);
       transition: all 1s linear;
       display: flex;
       flex-direction: column;
       position: absolute;
       left: 0;
       height: 90vh;
       width: 100%;
       background-color: #000;
       justify-content: center;
       align-items: center;
       ul{
           padding: 0;
           list-style-type: none;
           li{
               text-align: center;
               margin-bottom: 20px;
               a{
                   text-decoration: none;
                   font-size: 18px;
                   line-height: 23px;
                   letter-spacing: 0.96px;
                   color: #555E68;
               }
           }
       }
   }
}