How to add a transition in CSS and HTML when I click an icon?

When I want to click the icon on a phone to open the menu I want there to be a transition. This is the code for responsive devices:

@media screen and (min-width: 800px) {
    nav {
      height: 80px;
      flex-direction: row;
    }
  .logo {
      padding-left: 50px;
      margin: 0;
      width: 20%;

    }
  ul {
      display: flex;
      justify-content: flex-end;
      width: 80%;
      flex-direction: row;
    }
  ul li {
      display: inline-block;
      margin: 0 70px 0 0;
      text-align: left;
      border-bottom-style: none;
      padding: 0;
    }
  span.nav-toggle {
      display: none;
    }

    


   
  }

I was expecting nothing because I did not know how to do that. I tried many things but I don't know why it didn't work.

Hi in your CSS ist a little mistake, you cant give a transition to disply propperties. display: none/block, flex etc. are instand. If you want to build a Navi with transition you should use the height, thats the simplest way.

.navNormal{
      width: 15rem;
      height: 0;
}
.navTransition{
      height: 10rem;
      line-height: 4rem;
      transition:height 0.3s ease-in-out;
      transition-delay: 0.1s;
}

To trigger the animation you can use a Checkbox if you want to use CSS only. Otherwise you can use the onClick/onclick Attibute, an addEventListener (JS without Framework) or command classList.toggle(navTransition)