Responsive page, mobile first approach with Flexbox and CSS Grid.

This may be the 5th site I have built with the mobile first approach, I found it much easier than writing for desktop first. I find it a little challenging at times to foresee how the design is going to change from mobile to the desktop site and write my HTML accordingly. I think I am getting a little better each time.

I wasn't exactly sure how to toggle my mobile navigation menu to not only animate in, but also animate out. It doesn't animate out because I am just toggling a class called 'active' which displays as a block and displays none when off.

What is the best way to add a simple fly in and fly out animation for the mobile navigation?(using the hamburger menu). What method can I use to achieve this using basic CSS / JS ?