Question

I have a simple transition to shift a footer img up 5px when hovered smoothly, however Firefox doesn’t apply the smooth transition. Only webkit.

I have declared all vendor prefixes correctly as below.

    #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;

You can check for yourself in Safari/Chrome VS Firefox. Go the the footer and just hover over each item.

http://www.rjam.es

Answer 1

Firefox seems to require an initial value set first. Even if it’s 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;
}