10
SHARES
15 CSS Mobile Header Animations
March 18, 2016
0 comments
212,233
I have created this resource to highlight some navigation animations. By explaining the first example I hope you will understand the rest animations. The main thing that will differ is the navigation animation.

You can find the styles for the CSS animations in the header of each page. Animations where not possible entirely possible without using some JavaScript. For example each link inside the navigation requires a different animation delay. It would of been possible to use only CSS for this but you may run into trouble if you add more links, this way your navigation is future proof.

You can add as many links as you want in the navigation. The navigation will resize accordingly and the CSS will be generated automatically using JavaScript.

HTML

This is the HTML for the entire page.



You have to note a few important things. The navigation icon has the 'mobile-inner-header-icon-out' class attached to it, this class is important for the animation of the icon. Another important thing is that there are two 'span' divs inside the header icon. Those will be the lines that animate when you click on them.

CSS

There are other CSS styles that are related to '.mobile-inner-nav a' which you can find inside 'main.css' file. You will find the styles that animate the link embedded inside this document.



You can see that '.mobile-inner-nav a' has the animations 'returnToNormal' appointed to it.

JavaScript

This is the only JavaScript code this tutorial will require. The first block of code will slide the navigation div and the second block will add animation delays exponentially to each link.

10
SHARES
7
0
0
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
0 Comments
Would you like to share your thoughts?
Name:*
Email:*
Website:
Message:*
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.