CSS3 Animated Navigation Menu

Navigation menus play a crucial role in web design and a good navigation menu is definitely a plus to the design. Lately I was playing around with CSS3 for a navigation menu and I learnt how to create an animated navigation menu by only using CSS3(No Images, No JavaScript). Using CSS3 in place of jQuery/JavaScript for animations has obvious advantages like faster load time, lesser heavier website, etc. In this article I am sharing the code of a navigation menu made using CSS3. It renders perfectly on Chrome, Firefox, Safari and Opera. And without the easing effects on Internet Explorer and non CSS3 compatible browsers. Pure CSS3 Navigation Menu
Live Demo // Download


body {
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    background: #545454;
    margin: 0;
    background: -webkit-gradient(linear, left top, right bottom, from(#545454), color-stop(.5, #7e7e7e), to(#545454)) fixed;
    background: -webkit-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
    background: -moz-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
    background: -o-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
    border-top: 7px solid #52a8e8;
    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
    letter-spacing: 2px;
    font-size: 20px;
a {
    text-decoration: none;
    color: #fff;
header {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
header nav a {
    position: relative;
    float: left;
    width: 150px;
    text-align: center;
    padding-top: 23px;
    padding-bottom: 30px;
    margin-right: 20px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    background: #52a8e8;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #4984ce));
    background: -moz-linear-gradient(center top, #52a8e8 20%, #4984ce 100%);
    background: -o-linear-gradient(#52a8e8, #4984ce);
header nav a:hover {
    padding-top: 53px;
    padding-bottom: 60px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;


<header> <nav> [HOME][1] [ABOUT][1] [WORK][1] [CONTACT][1] [BLOG][1] </nav> </header>