Emulating Facebook Paper's menu animation

So Facebook’s Paper app for iOS is pretty amazing. If you haven’t used it yet, I highly recommend it—it’s a UX nerd’s dream. One thing I particularly enjoyed was the menu button. It’s the standard “hamburger” style menu icon, but clicking it transitions the icon into an “X” icon by way of a pleasing little “bounce”. After playing with it for a couple of minutes (I was seriously entranced) I thought to myself, “Self? I bet you could do that with some CSS animations and the tiniest amount of JavaScript. So I made this: [codepen_embed height="268” theme_id="4296" slug_hash="hFxIG" default_tab="result"]See the Pen Facebook Paper menu icon by Daniel (@dstrunk) on CodePen.[/codepen_embed] Feel free to use it on your site … If you’re using Bootstrap like so many people these days are, the HTML is pretty much the same (and can be modified to fit perfectly fine). It’s only been tested on modern browsers, so some additional CSS might be needed to make it gracefully degrade. Enjoy!* * Note: the CSS in the Codepen includes animation-play-state: initial !important; on the top and bottom bars. This is to override Codepen’s insistence on pausing the animation after 5 seconds (despite my embedding the code with “animation should run forever” ???). If you want to use the code in your website, you can remove these lines of CSS from your stylesheet.