Question

I made some CSS animations, and on WebKit (Safari/Chrome), it works fine, but on Firefox the timing is messed up.

JSFiddle: http://jsfiddle.net/jmorais/p5XCD/1/

Code:

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();     
  }
}

body {
margin-left: 350px;   
}

.tile {
  position:absolute;
  width:350px;
  height:400px;
  left: 50%;
  margin: 0 auto;
  background: pink;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.out {
  z-index: 3;
}

.in-left {
  z-index: 2;
  left: -350px;
  -webkit-transform: rotateY(-180deg);
  -webkit-transform-origin: 100% 100%;    
  -moz-transform: rotateY(-180deg);
  -moz-transform-origin: 100% 100%;    
}

.in-right {
  z-index: -1;
}


.content {
    border: 3px black double;   
    margin: 10px;
    padding: 20px;
    height: 335px;
}

.perspective {
  -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    position: relative;
  display: inline-block; 
}

/*****************************************
* Open
******************************************/

.openingOut {
  /* Webkit */
  -webkit-animation-name: open-card-out;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: open-card-out;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1; 
  -moz-animation-direction: alternate;
}

.openingIn {
  /* Webkit */
  -webkit-animation-name: open-card-in;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: open-card-in;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
}

.outOpen {
  -webkit-transform: rotateY(180deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotateY(180deg);
  -moz-transform-origin: 0 0;
}

.inOpen {
  -webkit-transform: rotateY(0deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotateY(0deg);
  -moz-transform-origin: 0 0;
}

/* Webkit */
@-webkit-keyframes open-card-out {
  from {
    -webkit-transform-origin: left 0%;
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform-origin: left 0%;
    -webkit-transform: rotateY(-180deg);
  }
}


@-webkit-keyframes open-card-in {
  from {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(180deg);
  }
  to {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(0deg);
  }
}

/* Firefox */
@-moz-keyframes open-card-out {
  from {
    -moz-transform-origin: left 0%;
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform-origin: left 0%;
    -moz-transform: rotateY(-180deg);
  }
}


@-moz-keyframes open-card-in {
  from {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(180deg);
  }
  to {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(0deg);
  }
}
/*****************************************
* Close
******************************************/

.closingOut {
  /* Webkit */
  -webkit-animation-name: close-card-in;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: close-card-in;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1; 
  -moz-animation-direction: alternate;
}

.closingIn {
  /* Webkit */
  -webkit-animation-name: close-card-out;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 3s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  /* Firefox */
  -moz-animation-name: close-card-out;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 3s;
  -moz-transition-delay: 0s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
}

@-webkit-keyframes close-card-in {
  from {
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-origin: 0% 0%;
  }
  to {
    -webkit-transform: rotateY(0deg);
    -webkit-transform-origin: 0% 0%;
  }
}

@-webkit-keyframes close-card-out {
  from {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(180deg);
  }
}

@-moz-keyframes close-card-in {
  from {
    -moz-transform: rotateY(-180deg);
    -moz-transform-origin: 0% 0%;
  }
  to {
    -moz-transform: rotateY(0deg);
    -moz-transform-origin: 0% 0%;
  }
}

@-moz-keyframes close-card-out {
  from {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform-origin: right 0%;
    -moz-transform: rotateY(180deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="perspective"  onclick="toggleCard();">
      <div class="tile out out">
        <div class="content">
            <p>out</p>
        </div>
      </div>
      <div class="tile in-left">
        <div class="content"> 
            <p>in-left</p>            
        </div>
      </div>
      <div class="tile in-right">
        <div class="content">
          <div style="display: table; height: 100%; width: 100%;">
              <p>in-right</p>
        </div>
        </div>
      </div>
    </div>

As you can see, the in-left div opens in the same time as the out div if you’re using Safari/Chrome, but on Firefox it will open at different times, messing up the whole animation.

How can I fix this?

Answer 1

An answer is not needed because the animation effects are the same in both browsers, stable builds tested.

Chrome:

19.0.1084.56 (Official Build 140965) m

Firefox:

Mozilla/5.0 (Windows NT 5.1; rv:13.0) Gecko/20100101 Firefox/13.0

How ironic this non-answer is an answer.

To be sure, flush out your browsers cache and test on another PC for verification.