firefox和其他浏览器的css3动画计时不同

我有两个正方形的div，我从0旋转到90度，然后回到0。在每个正方形中有两个图像，绝对位于彼此的顶部

图像之间的可见性切换，但您不应看到切换。当正方形以90度（垂直于屏幕）旋转，因此不可见时，应发生此情况

我的问题：在firefox中，时间安排是完美的，但在chrome、safari和IE中，时间安排是完美的。我不知道为什么。

我使用css3动画和关键帧来控制方形容器div的旋转，还通过切换“隐藏”图像的z索引来更改图像的可见性

一个注意事项：我使用PHP获取一个随机数，然后将其作为动画延迟值的内联样式插入。我最初是用jquery.css（）来实现这一点的，但我试图最小化前端的工作，因为这似乎是解决计时问题的地方

代码如下：

.pair容器{
-webkit动画名称：旋转；
-webkit动画持续时间：8s；
-webkit动画迭代计数：无限；
动画名称：旋转；
动画持续时间：8秒；
动画迭代次数：无限；
显示：内联块；
高度：150像素；
保证金：5px；
位置：相对位置；
宽度：150px；
}
.配对容器a{
左：0；
位置：绝对位置；
排名：0；
z指数：0；
}
.配对容器a：第一个孩子{
-webkit动画名称：flip；
-webkit动画延迟：2s；
-webkit动画持续时间：8s；
-webkit动画迭代计数：无限；
动画名称：翻转；
动画延迟：2s；
动画持续时间：8秒；
动画迭代次数：无限；
}
@关键帧旋转{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
25% {
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
50% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
75% {
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}  
100% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
}
@关键帧翻转{
0% { 
z指数：0；
}
25% {
z指数：1；
}
50% { 
z指数：1；
}
75% {
z指数：1；
}
100% { 
z指数：0；
}
}

此代码

    0% { 
        z-index: 0; 
    }
    25% {
        z-index: 1; 
    }

这就是问题所在。您需要z索引的变化精确地发生在25%，但这段代码不能保证这一点。在Chrome中，这一比例为12.5%

实现这一点的正确代码是：

    0%, 24.99% { 
        z-index: 0; 
    }
    25% {
        z-index: 1; 
    }

更正的代码段

.pair容器{
-webkit动画名称：旋转；
-webkit动画持续时间：8s；
-webkit动画迭代计数：无限；
动画名称：旋转；
动画持续时间：8秒；
动画迭代次数：无限；
显示：内联块；
高度：150像素；
保证金：5px；
位置：相对位置；
宽度：150px；
}
.配对容器a{
左：0；
位置：绝对位置；
排名：0；
z指数：0；
}
.配对容器a：第一个孩子{
-webkit动画名称：flip；
-webkit动画延迟：2s；
-webkit动画持续时间：8s；
-webkit动画迭代计数：无限；
动画名称：翻转；
动画延迟：2s；
动画持续时间：8秒；
动画迭代次数：无限；
}
@关键帧旋转{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
25% {
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
50% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
75% {
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}  
100% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
}
@关键帧翻转{
0%, 24.99% { 
z指数：0；
}
25% {
z指数：1；
}
50% { 
z指数：1；
}
75% {
z指数：1；
}
75.01%, 100% { 
z指数：0；
}
}

---

很高兴它起了作用！