Question 166246 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Does WordPress Css transition animation work in Firefox & Safari?

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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!

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search