CODEWITHSUNDEEP
htmlcssfirefoxtransition
Kim Castillo
Kim Castillo

Reputation: 21

CSS Transition not working in Firefox

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

Upvotes: 0

Views: 1293

Answers (1)

Stickers
Stickers

Reputation: 78796

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>

Upvotes: 1

Related Questions