变换和幻灯片在Chrome中不起作用的动画

Question

我试图创建一个动画，其中第三个菜单项的文本从左侧悬停在幻灯片中。动画似乎正在工作，因为我可以看到颜色的变化，但幻灯片效果不起作用。

我现在只用铬测试网站。

<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/

Answer 1

这是因为left对position:static元素没有做任何事情。该动画都在这里工作，我敢肯定这是不是你希望它是什么样子虽然:)

jsFiddle

#topmenu ul li:nth-of-type(3) { 
    position:relative; 
} 
li:nth-of-type(3) .menuname { 
    position:absolute; 
    left:-1000px; 
}