将animation2改为
@-webkit-keyframes animation2{from{margin-left:0}
to{margin-left:185pxopacity:1}
}
@-moz-keyframes animation2{
from{margin-left:0}
to{margin-left:185pxopacity:1}
}
给你个例子
<title>div css3 侧边菜单导航栏-www.codesc.net</title><style type="text/css">
*{margin:0padding:0list-style-type:none}
a,img{border:0}
body{font:12px/180% Arial, Helvetica, sans-serif, "微软雅黑"}
.demo{margin:60px autowidth:720px}
.navbox{float:left}
ul.nav{width:200pxpadding:60px 0 60px 0background:url() no-repeat}
ul.nav li{margin:5px 0 0 0}
ul.nav li a{
background:#cbcbcb url() no-repeatcolor:#174867padding:7px 15px 7px 15pxwidth:100pxdisplay:blocktext-decoration:none
-webkit-transition:all 0.3s ease-out
-moz-transition:all 0.3s ease-out
-o-transition:all 0.3s ease-out
-webkit-box-shadow:2px 2px 4px #888
-moz-box-shadow:2px 2px 4px #888
-o-box-shadow:2px 2px 4px #888
}
ul.nav li a:hover{background:#ebebeb url() no-repeatcolor:#67a5cdpadding:7px 15px 7px 30px}
</style>
<div class="demo">
<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</div>
<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>
</div>
