firefox和其他浏览器之间的css3动画时序不同

Question

我有几个正方形div，我从0度旋转到90度，然后回到0.每个正方形内有2个图像，绝对位于彼此之上。

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

我的问题：在Firefox中，时机非常完美，但在chrome，safari和IE中关闭。我无法弄清楚原因。

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

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

以下是代码：

.pair-container {	
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	
	animation-name: rotate;
	animation-duration: 8s;
	animation-iteration-count: infinite;
					
	display:inline-block;
	height:150px;
	margin:5px; 
	position:relative;
	width:150px;
}
.pair-container a {
    left: 0;
    position: absolute;
    top: 0;
	z-index:0;
}
.pair-container a:first-child {
	-webkit-animation-name: flip;	
	-webkit-animation-delay: 2s;	
	-webkit-animation-duration: 8s;	  
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: flip;	
	animation-delay: 2s;	
	animation-duration: 8s;	  
	animation-iteration-count: infinite;   
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  75% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }  
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@keyframes flip {
	0% { 
 		z-index: 0;	
	}
	25% {
		z-index: 1;	
	}
	50% { 
 		z-index: 1;	
	}
	75% {
		z-index: 1;	
	}
	100% { 
 		z-index: 0;	
	}
		
}

<div style="animation-delay:2s;" class="pair-container">
  <a target="_blank" href="https://www.google.com" style="animation-delay:2s;">
    <img src="http://s24.postimg.org/5o8rk8i8x/fire_drink.jpg">
  </a>
  <a target="_blank" href="https://www.google.com">
    <img src="http://s27.postimg.org/g1bk23lyn/food.jpg">
  </a>
</div>

<div style="animation-delay:3s;" class="pair-container">
  <a target="_blank" href="https://www.google.com" style="animation-delay:3s;">
    <img src="http://s27.postimg.org/g1bk23lyn/food.jpg">
  </a>
  <a target="_blank" href="https://www.google.com">
    <img src="http://s24.postimg.org/5o8rk8i8x/fire_drink.jpg">
  </a>
</div>

Answer 1

此代码

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

是问题所在。您需要将z-index的更改精确地发生在25％，但此代码并不能保证。在Chrome中，它的发生率为12.5％。

实现这一目标的正确代码是：

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

更正了代码段

＆＃13;

＆＃13;

.pair-container {	
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	
	animation-name: rotate;
	animation-duration: 8s;
	animation-iteration-count: infinite;
					
	display:inline-block;
	height:150px;
	margin:5px; 
	position:relative;
	width:150px;
}
.pair-container a {
    left: 0;
    position: absolute;
    top: 0;
	z-index:0;
}
.pair-container a:first-child {
	-webkit-animation-name: flip;	
	-webkit-animation-delay: 2s;	
	-webkit-animation-duration: 8s;	  
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: flip;	
	animation-delay: 2s;	
	animation-duration: 8s;	  
	animation-iteration-count: infinite;   
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  75% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }  
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@keyframes flip {
	0%, 24.99% { 
 		z-index: 0;	
	}
	25% {
		z-index: 1;	
	}
	50% { 
 		z-index: 1;	
	}
	75% {
		z-index: 1;	
	}
	75.01%, 100% { 
 		z-index: 0;	
	}
		
}

＆＃13;

<div style="animation-delay:2s;" class="pair-container">
  <a target="_blank" href="https://www.google.com" style="animation-delay:2s;">
    <img src="http://s24.postimg.org/5o8rk8i8x/fire_drink.jpg">
  </a>
  <a target="_blank" href="https://www.google.com">
    <img src="http://s27.postimg.org/g1bk23lyn/food.jpg">
  </a>
</div>

<div style="animation-delay:3s;" class="pair-container">
  <a target="_blank" href="https://www.google.com" style="animation-delay:3s;">
    <img src="http://s27.postimg.org/g1bk23lyn/food.jpg">
  </a>
  <a target="_blank" href="https://www.google.com">
    <img src="http://s24.postimg.org/5o8rk8i8x/fire_drink.jpg">
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;