變換和幻燈片在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; 
}