In this tutorial I will show you how to create CSS3 menu with bouncing effect. In thisCSS3 menu tutorial we will use keyframes to apply bouncing effect on menu. With thekeyframes rule, you can create animation. During animation you can change the style as much as you want. As you know how important is menu navigation on any websites, so every designer or developer try to make it different and unique by its designing or applying effects using Jquery. Using keyframes rule you can easily create many beautiful animations with no extra efforts or burdens of flash or jquery. In this menu tutorial I started with simple HTML5 menu structure and then followed by CSS3 style structure.
Final Product
HTML5 Menu structure
<!DOCTYPE html>
<title>Round Menu With Bouncing Effect</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600' rel='stylesheet' type='text/css'>
</head>
<body class="body">
<h1>Wedesignpixel</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS3 Menu Styling structure
/* CSS Document */
body
{
background:#573C47;
}
.body
{
width:45%;
margin:5% auto;
}
h1
{
color:#fff;
font-family: 'Source Code Pro', sans-serif;
font-size:36px;
text-align:center;
}
nav
{
position:relative;
margin-top:20%;
}
nav ul li
{
position:relative;
list-style:none;
display:inline-block;
}
nav ul li a
{
text-decoration:none;/*Remove underline from links*/
color:#fff;
display:block;
height:75px;
width:120px;
background:#FF3C47;
border-radius:50%;/*used to make Circle*/
text-align:center;
padding-top:45px;/* adjust padding top and height of "a" tag properly*/
transition:all 0.2s ease-in;/*make transitu=ion smooter with ease-in effect*/
-moz-transition:all 0.2s ease-in;
-o-transition:all 0.2s ease-in;
-webkit-transition:all 0.2s ease-in;
font-family: 'Source Code Pro', sans-serif;/*google fonts*/
}
/*Animation effect using keyframes*/
@keyframes bounce
{
0%
{
-moz-transform:translateY(0px);/*translateY used to chnage the postion with respect to Y-axis*/
}
25%
{
-moz-transform:translateY(-10px);
}
50%
{
-moz-transform:translateY(0px);
}
75%
{
-moz-transform:translateY(10px);
}
100%
{
-moz-transform:translateY(0px);
}
}
/*Bouncing animation effect for mozilla browsers*/
@-moz-keyframes bounce
{
0%
{
-moz-transform:translateY(0px);
}
25%
{
-moz-transform:translateY(-10px);
}
50%
{
-moz-transform:translateY(0px);
}
75%
{
-moz-transform:translateY(10px);
}
100%
{
-moz-transform:translateY(0px);
}
}
/*Bouncing animation effect for IE browsers*/
@-webkit-keyframes bounce
{
0%
{
-webkit-transform:translateY(0px);
}
25%
{
-webkit-transform:translateY(-10px);
}
50%
{
-webkit-transform:translateY(0px);
}
75%
{
-webkit-transform:translateY(10px);
}
100%
{
-webkit-transform:translateY(0px);
}
}
/*Bouncing animation effect for opera browsers*/
@-o-keyframes bounce
{
0%
{
-moz-transform:translateY(0px);
}
25%
{
-moz-transform:translateY(-10px);
}
50%
{
-moz-transform:translateY(0px);
}
75%
{
-moz-transform:translateY(10px);
}
100%
{
-moz-transform:translateY(0px);
}
}
/*Properties to control the animation*/
nav ul li a:hover
{
animation-name: bounce;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
-moz-animation-name: bounce;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-o-animation-name: bounce;
-o-animation-duration: 0.3s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards;
}
If you have any doubt regarding this menu tutorial then comment below or mail me. Thanks!