CSS Transform - проблема синхронизации в Firefox

Я сделал несколько CSS-анимаций, и в WebKit (Safari/Chrome) он работает нормально, но в Firefox время искажено.

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

Код:

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>

Как вы можете видеть, div в левом углу открывается одновременно с выходом div, если вы используете Safari / Chrome, но в Firefox он открывается в разное время, что портит всю анимацию.

Как я могу это исправить?

Источник

2 ответа

Решение

Ответ не нужен, потому что эффекты анимации одинаковы в обоих браузерах, тестируются стабильные сборки.

Хром:

19.0.1084.56 (Official Build 140965) m


Fire Fox:

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

Насколько иронично это отсутствие ответа - ответ.

Чтобы быть уверенным, очистите кеш вашего браузера и проверьте на другом компьютере для проверки.

Источник

Я согласен с arttronics, я видел, что вы тестируете все доступные решения css3, но я думаю, что есть только 2 возможных решения без использования css3 вообще

  1. просто подождите, пока Firefox улучшит свою производительность с помощью анимации и перехода css3, я лично думаю, что это не будет так долго
  2. использовать альтернативу для создания такой анимации, как canvas, я думаю, что это будет нелегко, но я думаю, что это возможное решение, только если вам действительно нужна эта анимация
Источник
Другие вопросы по тегам