15 CSS Mobile Header Animations

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.

<div class="mobile">
<div class="mobile-inner">
<div class="mobile-inner-header"><div class="mobile-inner-header-icon mobile-inner-header-icon-out"><span></span><span></span></div></div>
<div class="mobile-inner-nav">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<img src="_assets/photo1.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum felis eget commodo vulputate. Etiam finibus ex sem, sed molestie sapien euismod et. Nunc dolor magna, iaculis ut ipsum a, finibus imperdiet enim. Aliquam eget mi facilisis, dapibus felis sed, efficitur leo. Fusce vestibulum augue a ex feugiat pretium. Morbi eu aliquet mi. Nunc nec mi at quam rhoncus tincidunt eget non lectus.</p> <p> Nullam elementum ornare posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel eros nec massa faucibus commodo vel eget dui. Donec tincidunt orci id dui varius, dapibus tristique dolor mollis. Sed non faucibus quam, id ultrices lectus. Nunc lacinia dui sed justo suscipit, nec ornare ligula fermentum. Sed vitae tincidunt enim. Maecenas eget magna ex. In suscipit risus sem.</p>
</div>
</div>

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.

.mobile-inner-nav a{
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: returnToNormal;
	animation-name: returnToNormal;
}

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

@-webkit-keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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.

$(".mobile-inner-header-icon").click(function(){
	$(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
	$(".mobile-inner-nav").slideToggle(250);
});

$(".mobile-inner-nav a").each(function( index ) {
  $( this ).css({'animation-delay': (index/10)+'s'});
});