firefox - このCSSホバートランジションがFireFoxで失敗するのはなぜですか？

Question

ここに簡単な例を投稿しました：http： //jsfiddle.net/tkJgg/

FFには遷移プロパティの初期値を設定する必要があることを私は知っています。私はそれを持っていると思います。何が問題なのですか？

Answer 1

最後にを削除し0ます：

 -moz-transition: all 0.5s ease;

または、ゼロの後のs（秒）を指定します。

-moz-transition: all 0.5s ease 0s;

構文は言う：

 <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

ここ<time>で定義されている場所：

時間

CSSデータ型は、秒またはミリ秒で表される時間ディメンションを示します。それらは、<number>直後にユニットが続くもので構成されます。

そして更に ：

「単位のないゼロは許可されて<length>いますが、他のすべての単位では無効です。」

Answer 2

これを使って

-moz-transition: all 0.5s ease-in-out;

デモ

Answer 3

ホバー遷移はMozillaで失敗しませんが、コードエラーが原因で、またはブラウザのロードに失敗したために、このプロパティが無効になることがあります。この問題を無視するには、CSSトランジションでブラウザーを定義する必要があります。以下は、さまざまなメインブラウザを定義する際に使用する必要があるコードの例です。

#mydiv a:hover{
   -moz-transition:all 0.5s ease-in-out;     /*For Mozilla Browser*/ 
   -webkit-transition:all 0.5s ease-in-out;  /*For Chrome and Safari*/
   -o-transition:all 0.5s ease-in-out;       /*For Opera Browser*/
    transition:all 0.5s ease-in-out;         /*For Other Browser*/
}