My CSS animations are working perfectly on WebKit browsers like Safari and Chrome, but the timing is all messed up on Firefox.
JSFiddle: http://jsfiddle.net/jmorais/p5XCD/1/
Here is the code snippet:
var open = false;
var intransition = false;
function openCard() {
intransition = true;
$('.out').addClass('openingOut');
$('.in-left').addClass('openingIn');
setTimeout(function() {
$('.out').css("z-index", "2");
$('.in-left').css("z-index", "3");
}, 850);
setTimeout(function(){
$('.out').removeClass('openingOut').addClass('outOpen');
$('.in-left').removeClass('openingIn').addClass('inOpen');
open = true;
intransition = false;
}, 3000);
}
function closeCard() {
intransition = true;
$('.out').addClass('closingOut');
$('.in-left').addClass('closingIn');
setTimeout(function() {
$('.out').css("z-index", "3");
$('.in-left').css("z-index", "2");
}, 1000);
setTimeout(function(){
$('.out').removeClass('closingOut').removeClass('outOpen');
$('.in-left').removeClass('closingIn').removeClass('inOpen');
open = false;
intransition = false;
}, 3000);
}
function toggleCard() {
if (intransition) { return; }
if (open) {
closeCard();
} else {
openCard();
}
}
It seems that the animation timings on Firefox are not synchronized as intended. Any suggestions on how to resolve this issue?