CSS переходы не работают?

Question

По какой-то причине я не могу заставить работать CSS-переходы.Я уверен, что это очень простая ошибка.Но я уже час бью головой об стену.Я использую Mozilla Firefox 4.0.1 на Windows 7 64bit.

<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

Вы должны заглянуть в среду SASS для разработки CSS. Вам не придется беспокоиться об экспериментальных зависимостях, так как фреймворк позаботится обо всем за вас.

Answer 3

это также можно сделать с помощью jquery / jquery ui, поэтому я начал работать во всех браузерах здесь =) http://docs.jquery.com/UI/Effects/ClassTransitions

Answer 4

Вам необходимо использовать префикс -moz-, так как он еще не стандартизирован. Итак:

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