CSS Transition not working in Firefox

Question

I've been working on my special hover effect for my button, but the problem is, it's not working on Firefox, but it works on chrome smoothly.

#hotsheet_wrapper .hs_sellers{
    background:url('images/hs_sl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_buyers{
    background:url('images/hs_sl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_senior{
    background:url('images/hs_sl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_divorce{
    background:url('images/hs_dl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_construction{
    background:url('images/hs_dl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_sellers:hover{
    background:url('images/hs_sellers.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_buyers:hover{
    background:url('images/hs_buyers.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_senior:hover{
    background:url('images/hs_senior.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_divorce:hover{
    background:url('images/hs_divorce.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_construction:hover{
    background:url('images/hs_construction.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

have you tried this notation: `-moz-transition:all` .1s ease; ? — Paul, Mar 09 '15 at 21:50
here you have a good example [stackoverflow](http://stackoverflow.com/questions/9483364/css3-background-image-transition) — fcastillo, Mar 09 '15 at 22:11
Well, then I suggest you that you use two divs with backgrounds different but one of them with opacity 0 and in hover do a transition to opacity 1. — fcastillo, Mar 09 '15 at 22:17

Stickers · Answer 1 · 2018-02-07T00:15:35.927

Looks like it's a bug - https://bugzilla.mozilla.org/show_bug.cgi?id=546052

However, you can use CSS opacity or JS/jQuery to get similar effects. Check out the following pure CSS solution.

.element {
    position: relative;
    width: 200px;
    height: 300px;
}
.element:before,
.element:after {
    background-repeat: no-repeat;
    content:"";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
}
.element:before {
    background-image: url(https://picsum.photos/200/300?image=0);
    transition: opacity 1s;
    z-index: 1;
}
.element:after {
    background-image: url(https://picsum.photos/200/300?image=1);
}
.element:hover:before {
    opacity: 0;
}

<div class="element"></div>

CSS Transition not working in Firefox

1 Answers1