CSS Animated Navigation Menu For Your Website.

* { padding:0; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
nav { max-width:900px !important; margin-top:20px; }
nav ul { list-style:none; overflow:hidden; }
nav li a { background:#016db2; border-right:1px solid #fff; color:#fff; display:block; float:left; font:400 13px 'Montserrat Alternates', Arial;
padding:10px; text-align:center; text-decoration:none; text-transform:uppercase; width:160px; -webkit-transition:transform 1s;
-moz-transition:transform 1s; }
nav#rotate li a:hover, .rotate { -moz-animation:animrotate 2s; -webkit-animation:animrotate 2s; background:#005388; }
@-moz-keyframes animrotate { 100% {background:green;-moz-transformerspective( 200px ) rotateY( 360deg );} }
@-webkit-keyframes animrotate { 100% {background:green;-webkit-transformerspective( 200px ) rotateY( 360deg );} }

<script type="text/javascript">
$(function() {
$("#withjquery li a").hover(function() {
var el = this;
$(this).addClass('rotate');
setTimeout(function() {
$(el).removeClass('rotate');
}, 2000);
});
});
</script>

Tagged in:

• animated navigation
• animated menu
• Css menu
• css navigation