Transition doesn't work in Firefox

Question

I want to change div's background image smoothly when user hovers mouse on element, so I use this code

$("#bg").css({'background-image':'url("'+$(images[background_id]).attr("src")+'")', 'background-size':'cover', 'transition': '1.5s','-webkit-transition' : '1.5s'});

In Chrome it works fine, but in FF background is changing immediately

Answer 1

According to Mozilla docs, background-image transitions aren't supported by Firefox.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties