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;
}
.navbar.active {
  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: https://codepen.io/argentinaivan/pen/WNXvwKP

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:

html{
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 ( https://i.imgur.com/ySF1rBS.png ) to appear and disappear with transition after clicking the button in the right upper corner.