CSS mozilla 过渡不起作用

Question

我有一个简单的过渡，可以在平滑悬停时将页脚 img 向上移动 5px，但是 Firefox 不应用平滑过渡。只有 webkit。

我已经如下正确声明了所有供应商前缀。

    #footer img {
        margin-left:8px;
        -webkit-transition:all .1s ease;
        -moz-transition:all .1s ease;
        -ms-transition:all .1s ease;
        transition:all .1s ease;
        cursor:pointer;

#footer img:hover {
    position:relative;
    top:-5px;

您可以在 Safari/Chrome VS Firefox 中自行检查。转到页脚并将鼠标悬停在每个元素上。

www.rjam.es

Answer 1

Firefox 似乎需要先设置一个初始值。即使它是 0。

#footer img {
     margin-left:8px;
     -webkit-transition:all .1s ease;
     -moz-transition:all .1s ease;
     -ms-transition:all .1s ease;
     transition:all .1s ease;
     cursor:pointer;
     position:relative;
     top:0;
}

#footer img:hover {
     top:-5px;
}