Creating an accessible, animated, and responsive navigation system

I've been struggling for the past couple weeks to design the perfect navigation (menu) system for my personal website which I am designing.

First, I need a system that is completely accessible as I am trying to reach compliance with the WCAG 2.0 level AA.

Second, as a graphic designer, I want my site to have some degree of animation to the navigation system (think Google's material style of motion).

Third, the navigation must be responsive and collapse for mobile applications.

What I have so far is a basic list-based menu system, featuring four main links, one of which also features a dropdown menu. I am having trouble balancing these three attributes I am seeking, particularly as a result of trying to ensure the navigation is both accessible and responsive.

I have been trying to follow W3C's tutorial here for the bulk of my system, but the main technical issue with their implementation is that display:none is used, which breaks any animation I try to develop.

The second technical issue is that I have a "checkbox hack" based solution for my responsiveness, and while it is hidden from screen readers and in my testing they are still able to access the menu at smaller sizes, people warn to stay away from this solution. I've read many, many articles on this subject and there just doesn't seem to be a definitive solution to my problems. Is there no perfect menu system? (Rhetorical, I know.)

My implementation thus far can be examined here: https://codepen.io/anon/pen/wXgrqP, the only immediate accessibility issues that I notice is that a screen reader will read items on the drop down menu for "Work" while the menu is not expanded, but because my menu is not that large, I am also wondering if this is actually an issue I should be worried about?

Thank you for listening to my ramblings!