Transition for my responsive Navbar dont works

Question

I want to create a navbar for my Website but if i add transition to the links on mobile mode, it dont animates

My HTML

<header>
        <nav>
            <span class="navvisible">
            <span class="toggler"><i class="fa-solid fa-bars"></i></span>

            <span class="header_nav">
                Logo
            </span>
            </span>
            <div class="nav_bar">
                <a class="active" href="#home">Home</a>
                <a href="#what">what</a>
                <a href="#thahell">ThaHell</a>
            </div>  

        </nav>

My CSS

@media screen and (max-width: 700px) {
    .toggler {
        font-size: 1.2em;
        padding-right: 10px;
        display: inline;
    }
    div.nav_bar {
        transition: all 1s;    
        height: 0;
        display: none;
        padding: 10px 70px;
    }
    header nav div a {
        display: block;
        text-align: center;
        font-size: 18px;
    } 
    .nav_bar.activenav{
        display: block;
        height: auto; 

    }
    header {
        width: 100%;
    }
    .active {
        padding-bottom: 2px;
    }
    .navvisible {
        padding-bottom: 10px;
    }
  }

The funktions of div.nav_bar and .nav_bar.activenav dont work. The class .activenav is toggled by JS.

Navbar active Navbar If i click on the 3 Bar Icon, the JS code will add the class .activenav to the div.nav_bar

I just want a transition effect.

I tried it with height and absolute positions but they didnt worked.

Answer 1

Try this

    .nav_bar.activenav {
    animation: appearing .3s linear;
    }
    @keyframes appearing {
    0% {
      height:0;
      }
    100% {
      height:auto;
      }
    }