How to use css3 animation in navigation menu ?

Demo

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Hi all, As we know almost all the browsers support css3. New css3 has reduced lots of javascript work and its also very lightweight.

Today I am going to show you, how to create a basic css3 based animation navigation menu

1. First of all create a html page having basic html structure for navigation menu using ul li. like below
   • Item 1
   • Item 2
   • Item 3
   • Item 4
   • Item 5
2. Now add some css code to make its look like navigation menu. like below

   .ui-menu{
   	margin:0;padding:0;
   }
   .ui-menu li{
   	float:left;
   	padding:0;
   	list-style:none;
   }
   .ui-menu li a{
   	border:1px solid;
   	font-size:15px;
   	font-family:arial;
   	display:block;
   	text-algin:center;
   	padding:10px 25px;
   	background: #606c88;
   	background: -moz-radial-gradient(center, ellipse cover,  #606c88 0%, #3f4c6b 100%);
   	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
   	background: -webkit-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
   	background: -o-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
   	background: -ms-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
   	background: radial-gradient(ellipse at center,  #606c88 0%,#3f4c6b 100%);
   	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=1 );
   	color:#fff;
   	text-decoration:none;
   }
   

3. Now create custom animation effect using css3. Its very easy to write like below

   @-webkit-keyframes hovereffect {
     from {
       -webkit-transform: rotate(0deg); /* Safari */
     }
   14%{
       -webkit-transform: rotate(-10deg); /* Safari */
   }
   28%{
       -webkit-transform: rotate(20deg); /* Safari */
   }
   42%{
       -webkit-transform: rotate(-10deg); /* Safari */
   }
   56%{
       -webkit-transform: rotate(15deg); /* Safari */
   }
   70%{
       -webkit-transform: rotate(-5deg); /* Safari */
   }
   84%{
       -webkit-transform: rotate(10deg); /* Safari */
   }
   
     to {
       -webkit-transform: rotate(0deg); /* Safari */
     }
   }
   
   @-moz-keyframes hovereffect {
     from {
       -moz-transform: rotate(0deg); /* IE 9 */
     }
   14%{
      -moz-transform: rotate(-10deg); /* IE 9 */
   }
   28%{
      -moz-transform: rotate(20deg); /* IE 9 */
   }
   42%{
       -moz-transform: rotate(-10deg);
   }
   56%{
      -moz-transform: rotate(15deg); /* IE 9 */
   }
   70%{
      -ms-transform: rotate(-5deg); /* IE 9 */
   }
   84%{
      -moz-transform: rotate(10deg); /* IE 9 */
   }
   
     to {
      -moz-transform: rotate(0deg); /* IE 9 */
     }
   }
   @keyframes hovereffect {
     from {
       transform: rotate(0deg);
     }
   14%{
       transform: rotate(-10deg);
   }
   28%{
       transform: rotate(20deg);
   }
   42%{
       transform: rotate(-10deg);
   }
   56%{
       transform: rotate(15deg);
   }
   70%{
       transform: rotate(-5deg);
   }
   84%{
       transform: rotate(10deg);
   }
   
     to {
       transform: rotate(0deg);
     }
   }
   

4. Now call this custom effect in hover and focus state of a like below

   .ui-menu li a:hover span,.ui-menu li a:focus span{
   	display:block;
     animation-duration: 0.5s;
     -webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
     animation-name: hovereffect;
     -webkit-animation-name: hovereffect;
     -moz-animation-name: hovereffect;
   }
   

That’s it now if you will final file, it should be something like below.

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

And when you will open this in browser you will see output like above. you can hover on this to check effect

Thanks for reading this article. Later I’ll show, how to create custom animation effect step by step