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

Copying from Google Material Design Staged animation for dropdown menu, this method show you how to create staged animation using CSS3.

Both methods use CSS3 transition feature. For creating staged animation of course we need to set the delay or each item. For the first method we create these delays by assigning it to each .menu-item and identifying the index by using nth-child(n).

The downside of this technique is we need to add the delay based on how many menu-item available. And there is some slight delay effect when you unhover the menu and quickly hovering it again. You can see the delay. because when we set the delay, it also apply to unhover state.

For the second method we dynamicly add the delay using jQuery, as well as the transfrom an opacity property. The big advantage of this method is you don't need to declare the delay for unknown index. And the slightly delay effect on first method can be removed by resetting the style attribute upon un-hovering.

If you have a better method please let me know in the comment. Thanks :)


  1. No comments yet.

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

You must be logged in to comment.