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
– Paul, Commented Mar 9, 2015 at 21:50

Stickers · Accepted Answer · 2018-02-07 00:15:35Z

1

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>

edited Feb 7, 2018 at 0:15

answered Mar 9, 2015 at 22:24

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Transition not working in Firefox

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related