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. This is brilliant!

  9. Brilliant stuff. :)

  10. This is great! :)

  11. This is so aweseome

  12. very natural movement ;) I love this

  13. 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?

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

  15. 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 ?

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

  17. transitions and 3D Transforms don't work

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

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

  20. Found it !

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

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

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

  24. ****love this

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

You must be logged in to comment.