Firefox上的CSS转换-计时问题

我制作了一些CSS动画，在WebKit（Safari/Chrome）上，效果很好，但在Firefox上，时间安排混乱

JSFiddle：

代码：

var open=false；
var内置=假；
函数openCard（）{
内定=真；
$（'.out'）.addClass（'openingOut'）；
$（'.in left'）.addClass（'openingIn'）；
setTimeout（函数（）{
$（'.out'）.css（“z-index”，“2”）；
$（'左'）.css（“z-index”，“3”）；
}, 850);
setTimeout（函数（）{
$（'.out'）.removeClass（'openingOut'）.addClass（'outOpen'）；
$（'.in left'）.removeClass（'openingIn'）.addClass（'inOpen'）；
开放=真实；
内置=假；
}, 3000);
}
函数closeCard（）{
内定=真；
$（'.out'）.addClass（'closingOut'）；
$（'.in left'）.addClass（'closingIn'）；
setTimeout（函数（）{
$（'.out'）.css（“z-index”，“3”）；
$（'左'）.css（“z-index”，“2”）；
}, 1000);
setTimeout（函数（）{
$（'.out'）.removeClass（'closingOut'）.removeClass（'outOpen'）；
$（'.in left'）.removeClass（'closingIn'）.removeClass（'inOpen'）；
开=假；
内置=假；
}, 3000);
}
函数切换卡（）{
if（内部转换）{return；}
如果（打开）{
closeCard（）；
}否则{
openCard（）；
}
}

正文{
左边距：350px；
}
.瓷砖{
位置：绝对位置；
宽度：350px；
高度：400px；
左：50%；
保证金：0自动；
背景：粉红色；
-webkit边界半径：5px；
-moz边界半径：5px；
}
.出去{
z指数：3；
}
.左{
z指数：2；
左：-350px；
-webkit变换：旋转（-180度）；
-webkit转换来源：100%100%；
-莫兹变换：旋转（-180度）；
-moz变换原点：100%100%；
}
.对{
z指数：-1；
}
.内容{
边框：3件黑色双人床；
利润率：10px；
填充：20px；
高度：335px；
}
.透视图{
-webkit透视图：1200px；
-moz透视图：1200px；
位置：相对位置；
显示：内联块；
}
/*****************************************
*打开
******************************************/
.打开{
/*网络工具包*/
-webkit动画名称：打开卡片输出；
-webkit动画计时功能：轻松；
-webkit动画持续时间：3s；
-webkit转换延迟：0秒；
-webkit动画迭代计数：1；
-webkit动画方向：交替；
/*火狐*/
-moz动画名称：打开卡片输出；
-moz动画计时功能：轻松；
-moz动画持续时间：3s；
-moz转换延迟：0s；
-moz动画迭代次数：1；
-moz动画方向：交替；
}
.开宁{
/*网络工具包*/
-webkit动画名称：在中打开卡片；
-webkit动画计时功能：轻松；
-webkit动画持续时间：3s；
-webkit转换延迟：0秒；
-webkit动画迭代计数：1；
-webkit动画方向：交替；
/*火狐*/
-moz动画名称：打开卡中；
-moz动画计时功能：轻松；
-moz动画持续时间：3s；
-moz转换延迟：0s；
-moz动画迭代次数：1；
-moz动画方向：交替；
}
.开放{
-webkit变换：旋转（180度）；
-webkit转换原点：0；
-莫兹变换：旋转（180度）；
-moz变换原点：0；
}
欧本先生{
-webkit变换：旋转（0度）；
-webkit转换原点：0；
-moz变换：旋转（0度）；
-moz变换原点：0；
}
/*网络工具包*/
@-webkit关键帧打开卡输出{
从{
-webkit变换原点：左0%；
-webkit变换：旋转（0度）；
}
到{
-webkit变换原点：左0%；
-webkit变换：旋转（-180度）；
}
}
@-webkit在中为打开的卡设置关键帧{
从{
-webkit转换原点：右0%；
-webkit变换：旋转（180度）；
}
到{
-webkit转换原点：右0%；
-webkit变换：旋转（0度）；
}
}
/*火狐*/
@-moz关键帧打开卡输出{
从{
-moz变换原点：左0%；
-moz变换：旋转（0度）；
}
到{
-moz变换原点：左0%；
-莫兹变换：旋转（-180度）；
}
}
@-moz关键帧打开卡在中{
从{
-moz变换原点：右0%；
-莫兹变换：旋转（180度）；
}
到{
-moz变换原点：右0%；
-moz变换：旋转（0度）；
}
}
/*****************************************
*接近
******************************************/
.结案{
/*网络工具包*/
-webkit动画名称：关闭卡进入；
-webkit动画计时功能：轻松；
-webkit动画持续时间：3s；
-webkit转换延迟：0秒；
-webkit动画迭代计数：1；
-webkit动画方向：交替；
/*火狐*/
-moz动画名称：关闭卡入；
-moz动画计时功能：轻松；
-moz动画持续时间：3s；
-moz转换延迟：0s；
-moz动画迭代次数：1；
-moz动画方向：交替；
}
克洛辛先生{
/*网络工具包*/
-webkit动画名称：关闭卡出；
-webkit动画计时功能：轻松；
-webkit动画持续时间：3s；
-webkit转换延迟：0秒；
-webkit动画迭代计数：1；
-webkit动画方向：交替；
/*火狐*/
-moz动画名称：关闭卡出；
-moz动画计时功能：轻松；
-moz动画持续时间：3s；
-moz转换延迟：0s；
-moz动画迭代次数：1；
-moz动画方向：交替；
}
@-webkit关键帧关闭卡{
从{
-webkit变换：旋转（-180度）；
-webkit转换源：0%0%；
}
到{
-webkit变换：旋转（0度）；
-webkit转换源：0%0%；
}
}
@-webkit关键帧关闭卡{
从{
-webkit转换原点：右0%；
-webkit变换：旋转（0度）；
}
到{
-webkit转换原点：右0%；
-webkit变换：旋转（180度）；
}
}
@-moz关键帧关闭卡{
从{
-莫兹变换：旋转（-180度）；
-moz变换原点：0%0%；
}
到{
-moz变换：旋转（0度）；
-moz变换原点：0%0%；
}
}
@-moz关键帧cl
19.0.1084.56 (Official Build 140965) m

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