Animated Menu CSS

by Annett

HTML

<ul id="nav">
    <li class="left"><a href="#">Home</a></li>
    <li class="right"><a href="#">About</a></li>
    <li class="left"><a href="#">Work</a></li>
    <li class="right"><a href="#">Contact</a></li>
</ul>

CSS

* {
   padding: 0;
   margin: 0;
}
 
body {
   background: #f4f1e5;
   color: #544738;
   font-family: helvetica, sans-serif;
}
ul li {
    float: left;
    list-style: none;
    margin-right: 1em; 
}
 
li a {
    color: #544738;
    text-decoration: none;
    float: left;
    font-size: 25px;
    padding: 12px;
}
 
li a:hover {
    color: #7eb9be;
}

li a:hover {
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
}


.left a:hover {
     
    /*Transition*/
    -webkit-transition:All .5s ease;
    -moz-transition:All .5s ease;
    -o-transition:All .5s ease;
     
    /*Transform*/
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
}
 
.right a:hover {
 
    /*Transition*/
    -webkit-transition:All .5s ease;
    -moz-transition:All .5s ease;
    -o-transition:All .5s ease;
     
    /*Transform*/
    -webkit-transform: rotate(10deg) scale(1.2);
    -moz-transform: rotate(10deg) scale(1.2);
    -o-transform: rotate(10deg) scale(1.2);
}