CSS過渡不起作用？

Question

由於某種原因，我似乎無法使CSS轉換正常工作。 我確信這是一個非常簡單的錯誤。 但是現在我已經把頭撞在牆上一個小時了。 我在Windows 7 64bit上使用mozilla firefox 4.0.1。

<style>
a:link {
 transition: color 1s ease-in-out;
 color: #fff;
 text-decoration: none;
 text-shadow: 1px 1px #000;
}

a:hover {
 color: #0072bc;
 text-decoration: none;
 text-shadow: 1px 1px #000;
}
</style>
<a href="#">test</a>

Answer 1

CSS過渡是實驗性的，但在某些引擎中已實現。 您需要使用特定的屬性：

-moz-transition /* for gecko based like firefox*/
-webkit-transition /* for  chrome safari ... */
-o-transition /* for opera*/

Answer 2

您需要使用-moz-前綴，因為它尚未標准化。 所以：

-moz-transition: color 1s ease-in-out;

Answer 3

這也可以使用jquery / jquery ui來完成，所以我可以在這里使用所有瀏覽器=） http://docs.jquery.com/UI/Effects/ClassTransitions

Answer 4

您應該研究用於CSS創作的SASS框架。 您無需擔心實驗性的依賴關系，因為該框架會為您解決所有這些問題。