-Webkit轉換翻譯不起作用

我想li逐漸向右滑動100px。我的CSS翻譯即刻起作用，但動畫不是。有人可以解釋爲什麼嗎？的jsfiddle這裏：http://jsfiddle.net/Lux4t/1/-Webkit轉換翻譯不起作用

<ul> 
    <li class="ease"><a href="">Ease</a></li> 
</ul>

這裏是我的CSS

li{ 
list-style: none; 
margin-bottom:20px; 
float:left; 
clear: both; 
} 
li a{ 
color:white; 
background-color:blue; 
display:block; 
height:100px; 
width:200px; 
transition-property:-webkit-transform; 
} 
li.ease a{ 
transition-timing-function: ease; 
} 
li:hover a{ 
-webkit-transform:translateX(100px); 
background-color: red; 
}

來源

2013-05-30 Lars

transition-property是transition（簡寫）的一部分。 transition-property也需要transition-duration才能工作。使用transition相反，它更容易編寫

CSS

li a { 
    color:white; 
    background-color:blue; 
    display:block; 
    height:100px; 
    width:200px; 
    transition:-webkit-transform 1s; 
}

見here

來源

2013-05-30 17:33:18 Sourabh

謝謝你的作品。但過渡性財產是一種財產。 https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property我想知道爲什麼我的版本不能正常工作... – Lars

我認真地看到了第一次O_O。 '過渡財產'是一個財產，...怪異 – Sourabh

解決它：添加transition-duration:3s;我li a CSS需要！

來源

2013-05-30 17:38:11 Lars

哈哈，我們在同一時間發現它：P – Sourabh

-Webkit轉換翻譯不起作用

回答

相關問題