css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A simple, clean pure CSS menu that uses keyframe animation to create a "swining panel" effect for sub nav. I am having trouble getting it to work in Opera but performs well in Chrome, Safari and Firefox (but getting a weird flicker). And, of course, doesn't work in IE but degrades well.


  1. I really really really like this!

  2. Little typo in "preserver-3d" - but it doesn't seem to affect it.

  3. changing opacity: 1 to opacity: .9999999 fixes the jarring snap to white text color at the end of the animation.

  4. Tip: Include frefix free in your CSS, you have no idea how many lines of code you can remove and how much time u can save when u use it!

  5. That typo didn't affect it because that property was not needed which is weird. I thought without that defined child elements would animate in a 2D space. I took it out and it works fine. Still learning.

  6. Nice effect! The 'preserve-3d' setting is only needed when you start nesting 3D transformed elements. It creates a new 3D rendering context, or extends the existing one (http://www.w3.org/TR/css3-transforms/#transform-3d-rendering). Because you are only transforming the '#menu li ul' elements you don't need it in this case.

  7. This also fixes the text color snapping: -webkit-font-smoothing: antialiased; in webkit at least :/

  8. Brilliant stuff. :)

  9. This is great! :)

  10. very natural movement ;) I love this

  11. I am having trouble getting this to work ... It works via codepen ... however, when I place the elements into Dreamweaver and trial it using chrome it doesnt work. (the swinging effect). I placed the css into an external sheet. Can anyone help?

  12. Make sure you are using prefixfree.js to handle browser prefixes.

  13. Does this work on internet explorer ? Using prefix free worked on chrome and firefox but it didn't work on internet explorer. Is there any way to fix ?

  14. Transitions and 3D Transforms don't work until IE 10.

  15. transitions and 3D Transforms don't work

  16. Hi! I'm using wordpress and I would like to use this menu but it doesn't work... Any idea ?

  17. Make sure you use prefixfree.js for browser prefixes.

  18. I called prefixfree.js in the functions.php page of my theme. :)

  19. Hallo, sorry, but it doesnt work on chrome, why? please help!

  20. if you tried to use this on your own make sure you include prefixfree.js for browser prefixing.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.