Transition on navigation menu

I have a problem with my responsive navigation menu. When I click on the button (took the icon from font awesome actually), my navbar appears as I wanted but it happens instantly, while I would like to appear gradually with transition. I was trying something like

.navbar {
  visibility: hidden;
} {
  transition: visibility 1s ease;
  visibility: visible;

and similar stuff with opacity and display (I understand why display: none and then display: flex on .active can’t be used with transition), but nothing worked out the way I wanted.

Any help please? Here is the codepen, button will appear when screen is less than 1000px:

Forgot to mention that with visibility there was even a space, of course I didn’t want that…

Hey There =)

Try to add

scroll-behavior: smooth;

But that needs to be added to an HTML selector:

scroll-behavior: smooth;

Let me know if that helps

Oh, thanks, but that is not what I need, I actually added that for the remainder of my page. I just need my navbar ( ) to appear and disappear with transition after clicking the button in the right upper corner.