css3實現帶有簡單動畫按鈕導航

transition-property：all | none | <property>[ ,<property> ]*

預設值：all
取值：

all：所有可以進行過渡的css屬性
none：不指定過渡的css屬性
<property>：指定要進行過渡的css屬性
說明： www.2cto.com
檢索或設定對象中的參與過渡的屬性。
預設值為：all。預設為所有可以進行過渡的css屬性。
如果提供多個屬性值，以逗號進行分隔。
對應的指令碼特性為transitionProperty。

html代碼如下：

<div class="content">    <h2>Simple Animated Menu Using CSS3</h2>    <h3>Example 1</h3>    <ul class="nav">        <li class="selected"><a href="http://www.php1.cn/">         <li><a href="http://www.php1.cn/">         <li><a href="http://www.php1.cn/">         <li><a href="http://www.php1.cn/">     </ul>    <br /><br />    <br /><br />    <div style="clear:both;"></div>    <h3>Example 2</h3><ul class="nav2">    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/"> </ul></div>

css代碼如下：

<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 a {    position:relative;    display:block;    padding:4px 8px;    border-bottom:2px solid #ccc;    background:#f4f4f4;    color:#999;    -webkit-transition:all 200ms ease-out;    -moz-transition:all 200ms ease-out;    -o-transition:all 200ms ease-out;    transition:all 200ms ease-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 a {    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 200ms ease-out;    -moz-transition:all 200ms ease-out;    -o-transition:all 200ms ease-out;    transition:all 200ms ease-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>

支援的瀏覽器Firefox, Chrome, Opera and Safari，對於ie不支援transition，

