Responsive Intro Section with Dropdown menu

i have a problem with making the mobile nav bar to transition in and out, i know that setting a display none then block will disable any transition animations, but that is the only way i know to code my mobile nav bar because i set the nav bar to be right:-100% but there is always overflow even though i set it to overflow: hidden. the over flow hidden property does not work so i will have to set it to display none and then display block on the checked property.

Any efficient way to do this will be appreciated :)

Note: i use checkbox and pure css to do my nav bar, i don't JS