我制作了一些 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,in-left div 与 out div 同时打开,但在 Firefox 上它将在不同时间打开,从而打乱了整个动画。
我怎样才能解决这个问题?