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; 
    }

更正的片段

.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;	
	}
		
}

<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>