How to use css3 animation in navigation menu ?

Demo


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    <html>
    <head>
    <title> CSS3 Navigation menu</title>
    </head>
    <body>
    	<ul class="ui-menu">
    		<li><a href="#"><span>Item 1</span></a></li>
    		<li><a href="#"><span>Item 2</span></a></li>
    		<li><a href="#"><span>Item 3</span></a></li>
    		<li><a href="#"><span>Item 4</span></a></li>
    		<li><a href="#"><span>Item 5</span></a></li>
    	</ul>
    </body>
    </html>
  2. Now add some css code to make its look like navigation menu. like below
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
    .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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    
    @-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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    .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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<html>
<head>
<title>css3 Animated Navigation</title>
<style type="text/css">
.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;
}
.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;
}
@-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);
  }
}
</style>
</head>
<body>
	<ul class="ui-menu">
		<li><a href="#"><span>Item 1</span></a></li>
		<li><a href="#"><span>Item 2</span></a></li>
		<li><a href="#"><span>Item 3</span></a></li>
		<li><a href="#"><span>Item 4</span></a></li>
		<li><a href="#"><span>Item 5</span></a></li>
	</ul>
</body>
</html>

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

Comments
  1. Anuradha

Leave a Reply

Your email address will not be published. Required fields are marked *

*