我正在尝试创建一个动画,其中第三个菜单项的文本在悬停时从左侧滑入。动画似乎可以正常工作,因为我可以看到颜色的变化,但幻灯片效果不起作用。
我现在只在 chrome 中测试网站。
<article class="home">
<nav class="topmenu">
<ul>
<li><a href="#"><span class="icon">1.</span><span class="menuname">MenuItem1</span></a></li>
<li><a href="#"><span class="icon">2.</span><span class="menuname">MenuItem2</span></a></li>
<li><a href="#"><span class="icon">3.</span><span class="menuname">MenuItem3</span></a></li>
<li><a href="#"><span class="icon">4.</span><span class="menuname">MenuItem4</span></a></li>
</ul>
</nav>
</article>
这是我正在使用的 CSS。
* {
margin:0;
padding:0;
}
html{
height:100%;
width:100%;
}
body{
margin:0 auto;
font-family: Tahoma, Geneva, sans-serif;
height:100%;
width:100%;
overflow:hidden;
background:#006;
color: white;
}
.main{
height:100%;
width:100%;
position:relative;
border: thin solid #FFF;
}
.home .topmenu ul li{
list-style-type: none;
float:left;
margin-right:3px;
background:#450000;
}
.home .topmenu ul li a{
position:relative;
padding:10px 10px 10px 10px;
display: inline-block;
text-decoration:none;
color:#f8d575;
}
.home .topmenu ul li .icon{
position: relative;
color:#FFF;
}
.home .topmenu ul li:nth-of-type(3):hover a .menuname{
-webkit-animation: menuname3 2s linear 0s 1 forwards;
-moz-animation: menuname3 2s linear 0s 1 forwards;
-o-animation: menuname3 2s linear 0s 1 forwards;
animation: menuname3 2s linear 0s 1 forwards;
}
@-webkit-keyframes menuname3{
from{
left:-1000px;
}
to{
left:auto;
color:#dfdeae;
-webkit-transform: scale(5);
}
}
有人可以告诉我为什么即使颜色变化有效,幻灯片和变换也不起作用。 http://jsfiddle.net/fHWDK/