css - Firefox や IE で CSS トランジションが発生しない

Question

私は次のようなシンプルなスタイルを持っています:

li, a {
    display: inline-block;
}
li {        
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}

これは、メニュー内のいくつかのアイコンで動作し、それらの上にカーソルを合わせると沈むようになっています。Chrome では正常に動作しますが、IE や FF では動作しません。これで何が間違っている可能性がありますか？

Answer 1

Firefox と IE では、アニメーション プロパティの初期属性を指定する必要があります。

そう：

li, a {
    display: inline-block;
}
li {        
    top: 0;        /* ADD THIS! */
    relative: 0;   /* This is important too or the item will pop back   
                      instead of transition*/
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}