Css transition animation Firefox and Safari don't work - css

Question

I have set up css animation for my background images, it works fine on chrome but not on firefox and safari, do you have any idea how to make this work?
Homepage: http://argeville.projet-inwie.com/
My css for animation:
#test1
{ transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out; -ms-transition: background 0.4s ease-in-out;
}
Thank's

Answer 1

Maybe more code and details could help...
First thing, check this tool when you need to make your CSS compatible with "all" browsers.
Autoprefixing tool
Check this post too: https://css-tricks.com/almanac/properties/t/transition/
As they say: IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.
So this code is enought:
#test1 {
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
Maybe try to install the latest version of browsers that don't work well.
Empty browser cache?
Try to apply another property instead of background to deduce if it's transition or background property that makes trouble.
Happy coding!

Answer 2

Thanks for your help.
I tried your code but it still doesn't work.
Here is the set of code to manage the different background of my home with the passage of the mouse.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.test2').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test2').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test3').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/aromes.jpg)');
});
$('.test3').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test5').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/centres.jpg)');
});
$('.test5').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test4').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/parfums.jpg)');
});
$('.test4').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
}); });
</script>
<style>
#test1{
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
</style>

Answer 3

You are correct that the transition does not work on Firefox.
Here is a simple snippet to show the problem:
#test1
{
transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out;
-ms-transition: background 0.4s ease-in-out;
background-image: url(https://picsum.photos/id/1015/200/300);
height: 200px;
width: 200px;
}
#test1:hover {
background-image: url(https://picsum.photos/id/1016/200/300);
}
<div id="test1"></div>
It depends on exactly what you want, but one way round it in this simple case is to not attempt a transition on the main element but to have the background images on before and after pseudo elements and fade them in and out. (They need to not be in the actual element because the opacity changes would affect its other content).
Hover on the image to get it to transition to another one.
#test1
{
position: relative;
height: 200px;
width: 200px;
}
#test1::before, #test1::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.4s ease-in-out;
}
#test1::before {
background-image: url(https://picsum.photos/id/1015/200/300);
opacity: 1;
}
#test1::after {
background-image: url(https://picsum.photos/id/1016/200/300);
opacity: 0;
z-index: -1;
}
#test1:hover::before {
opacity: 0;
}
#test1:hover::after {
opacity: 1;
}
<div id="test1"></div>