上からニュルッと　scss

前提・実現したいこと

メニューアイコンを押して、上から降りてくるメニューを作りたい。
Headerの下部から文字と背景が一緒にニュルって現れるようにしたい。

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

上から降りてきますが、文字が一緒に消えたりあらわれたりしないで、取り残され背景が消えてから、文字が消えます、または、背景が完全に現れる前に文字が現れます。
文字も背景と一緒に現れたりきえたりしてほしいです。

該当のソースコード

ソースコード
/*HTML*/
 <header>
    <div class="container">
      <h1><a href="#">XeoryExtension</a></h1>
      <nav>
        <ul>
          <li><a href="#">記事ページサンプル</a></li>
          <li><a href="#">Extentionをダウンロード</a></li>
        </ul>
        <div class="main-icon" id="main-icon">
          <span class="fas fa-align-justify"></span>
        </div>
        <div class="main-bar" id="main-bar">
          <h2>ブログコンテンツ</h2>
          <a href="#"><span class="fas fa-angle-right"></span>記事のページサンプル</a>
          <a href="#"><span class="fas fa-angle-right"></span>Extentionをダウンロード</a>
        </div>
      </nav>
    </div>
    </header>

/*scss*/
@media (max-width: 991px) {
  header {
    .container {
      h1 {margin-left: 25px;}
      nav {
        ul {display: none;}
        .main-icon {
          user-select: none;
          width: 116px;
          text-align: center;
          display: block;
          line-height: 93px;
          font-size: 32px;
          background-color: #3B4652;
          color: white;
          margin-right: 25px;
          cursor: pointer;
        }
        .main-bar {
          display: block;
          height: 0px;
          visibility: hidden;
          transition: 3s;
          width: 100%;
          background-color: #3B4652;
          position: absolute;
          top: 93px;
          left: 0;
          color: white;
          display: block;
          h2 {
            font-size: 16px;
            line-height: 26px;
            font-weight: bold;
            margin: {top: 37px; bottom: 22px};
            margin-left: 25px;
          }
          a {
            display: inline-block;
            font-size: 14px;
            color: white;
            &:first-of-type {
              margin-left: 45px;
            }
            &:last-of-type {
              margin: {left: 32.4%;}
            }
          }
        }
        .main-bar.open {
          z-index: 0;
          width: 100%;
          background-color: #3B4652;
          height: 155px;
          // transform: scaleY(150px);
          visibility: visible;
          position: absolute;
          top: 93px;
          left: 0;
          color: white;
          display: block;
          h2 {
            font-size: 16px;
            line-height: 26px;
            font-weight: bold;
            margin: {top: 37px; bottom: 22px};
            margin-left: 25px;
          }
          a {
            display: inline-block;
            font-size: 14px;
            color: white;
            &:first-of-type {
              margin-left: 45px;
            }
            &:last-of-type {
              margin: {left: 32.4%;}
            }
          }
        }
        
      }
    }
    
  }
/*js*/
'use strict'

const main_icon = document.getElementById('main-icon');
const main_bar = document.getElementById('main-bar');
console.log(main_bar);
main_icon.addEventListener('click', () => {
  main_bar.classList.toggle('open');
},false);