Question

I’m trying to create a fade out / fade in effect with CSS3 animations. Here is my CSS :

#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear; 
transition:opacity 0.5s linear;
}

And the Javascript (i’m using jquery) :

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");

It looks like the browser think it’s stupid to set the opacity to 0 then to set it back to 1. Does someone has a possible solution ?

Thank you.

Answer 1

Edit: Regard yaki’s answer for a pure CSS3 solution.

You’re not giving the browser enough time to complete the transition. If you add a setTimeout to the latter statements, it should work.

Something like this:

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);