CSS变换 - Firefox浏览器上的时间问题

Question

我制作了一些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>

从效果上看，如果你使用Safari/Chrome浏览器，则左侧的div与右侧的div同时打开，但是在Firefox中，它们将在不同的时间打开，导致整个动画混乱。

我该如何解决这个问题？

- José Morais

---

那个问题的答案导致了这个问题的产生。 - José Morais

我在你的fiddle上看到了Firefox和Chrome中相同的行为... - Boris Zbarsky

我看到两者都能正常工作。这是在Firefox的夜间版本中。在Firefox 12中，我看到了你看到的问题，但听起来它已经在过去几个月中修复了。 - Boris Zbarsky

在FF 13中尝试过了。它的工作方式与Chrome相同。看起来已经被修复了。 - Alexey Ivanov

我也得到了FF13，它在Chrome和FF中看起来一样（好的;P）:) - Sófka

Answer 1

一份答案是不必要的，因为两个浏览器中的动画效果是相同的，已经通过测试保持稳定。

Chrome：

19.0.1084.56 (Official Build 140965) m

火狐浏览器:

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

这个非回答作为回答真是讽刺。

确保清除浏览器缓存并在另一台电脑上进行测试以进行验证。

- arttronics

---

仅供参考：该问题是在Firefox 13发布之前提出的。在Firefox 12中，您可以看到这个问题，但是Mozilla似乎已经修复了这个错误。 - José Morais

有时候 Firefox 内置的自动更新会晚几天运行。Firefox v13 恰好在你发布问题的当天发布，这只是巧合。这个 维基网页 可以确认当前可用的版本。有时候执行“关于 Firefox”操作不会立即应用已发布的更新。很高兴这个问题解决了。 - arttronics

@J. Morais，我将为您选择的任何问题赞助50美元的赏金。只需在留言区留下评论，以备将来的SO问题即可。 - arttronics

Answer 2

我同意arttronics的观点，我看到你测试了所有可用的CSS3解决方案，但我认为没有使用CSS3只有两种可能的解决方案

1. 等待Firefox改善其与CSS3动画和过渡的性能，我个人认为这不会太久。
2. 使用替代方法来制作该动画，如canvas，我认为这不会很容易，但我认为这是一个可能的解决方案，只有当您真正需要运行该动画时才使用。

- MARP