Css3 enables navigation with simple animation buttons

 

Transition-property: all | none | <property> [, <property>] *

Default Value: all
Valid value:

All: all css attributes that can be transitioned
None: do not specify the css attribute of the transition.
<Property>: Specifies the css attribute for transition.
Www.: www.2cto.com
Retrieves or sets the attributes of the object involved in the transition.
The default value is all. By default, all css attributes that can be transitioned are used.
Multiple Attribute values are separated by commas.
The corresponding script feature is transitionProperty.

The html code is as follows:

<Div class = "content">
<H2> Simple Animated Menu Using CSS3 <H3> Example 1 <Ul class = "nav">
<Li class = "selected"> <a href = "/"> Home </a> </li>
<Li> <a href = "/"> About Us </a> </li>
<Li> <a href = "/"> Portfolio </a> </li>
<Li> <a href = "/"> Services </a> </li>
</Ul>
<Br/>
<Br/>
<Div style = "clear: both;"> </div>
<H3> Example 2 <Ul class = "nav2">
<Li> <a href = "/"> <strong> Home </strong> <em> Home </em> </a> </li>
<Li> <a href = "/"> <strong> About Us </strong> <em> About Us </em> </a> </li>
<Li> <a href = "/"> <strong> Portfolio </strong> <em> Portfolio </em> </a> </li>
<Li> <a href = "/"> <strong> Services </strong> <em> Services </em> </a> </li>
</Ul>
</Div>

The css code is as follows:

<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
Body {
Background: # eee;
Font-family: Verdana, Geneva, sans-serif;
Font-size: 12px;
}
A {
Text-decoration: none;
}
H2, h3 {
Margin: 0 0 20px;
Text-shadow: 2px 2px # ffffff;
}
H2 {
Font-size: 28px;
}
H3 {
Font-size: 22px;
}
. Content {
Padding: 40px;
Width: 500px;
Margin: 30px auto;
}
. Nav {
List-style: none;
}
. Nav li {
Float: left;
}
. Nav {
Position: relative;
Display: block;
Padding: 4px 8px;
Border-bottom: 2px solid # ccc;
Background: # f4f4f4;
Color: #999;
-Webkit-transition: all 200 ms outgoing-out;
-Moz-transition: all 200 ms outgoing-out;
-O-transition: all 200 ms outgoing-out;
Transition: all 200 ms outgoing-out;
}
. Nav a: hover {
Color: #000;
Background: # fff;
Border-color: #000;
Padding: 8px;
Top:-4px;
}
. Nav. selected a,. nav. selected a: hover {
Background: #444;
Color: # fff;
Border-color: #000;
}
. Nav2 {
List-style: none;
}
. Nav2 li {
Float: left;
Position: relative;
}
. Nav2 {
Display: block;
Float: left;
Border: none;
Position: relative;
Height: 22px;
Overflow: hidden;
}
. Nav2 a strong,. nav2 a em {
Cursor: pointer;
Padding: 4px 8px;
Font-weight: bold;
Font-style: normal;
Display: block;
-Webkit-transition: all 200 ms outgoing-out;
-Moz-transition: all 200 ms outgoing-out;
-O-transition: all 200 ms outgoing-out;
Transition: all 200 ms outgoing-out;
}
. Nav2 a strong {
Position: relative;
Top: 0;
Left: 0;
Color: #000;
Background: # fff;
}
. Nav2 em {
Position: absolute;
Top: 100%;
Background: #000;
Color: # fff;
}
. Nav2 a: hover strong {
Top:-100%;
}
. Nav2 a: hover em {
Top: 0;
}
</Style>

Supported browsers: Firefox, Chrome, Opera and Safari. transition is not supported for ie,