The first thing to know about transitions is that not all properties are animatable because some only have 2 states.
Your menu is hidden with display:none and display is not one of the properties that can be animated. If an element is
display:none then the element is gone immediately; there is no half way house between being block and none (unlike opacity where you can go from zero to 100%).
Also there is no way to animate/transition an element to auto states so you can’t animate from say height:0 to height:auto.
If you want to hide something and then show it with a transition effect then you have to be more creative and perhaps hide off-screen instead of display:none and then bring it back on screen and you can animate the movement.
For your example you could add the following changes.
That will give you a little bit of text-animation when the menu is toggled. You could also experiment with opacity and other methods of hiding.
If you actually meant you wanted a delay when the hamburger was clicked then that would be very odd and feel like it was not working and I would advise against that.