html - 为什么 firefox 向我展示幻灯片，而 chrome 却没有？

Question

知道为什么此幻灯片在 Firefox 中有效，但在 Chrome 中无效吗？(尚未在 IE 中测试过)希望有人能提供帮助!

CSS:

#slideshow {
  margin:50px auto;
  width:60em;
  height:18em;
  overflow:hidden;
  border:0.4em solid;
  border-color: black;
  position:relative;
}
.photo{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

HTML:

<div id="slideshow">
    <img class='photo'  src="Images/Red.jpeg" alt="">
    <img class='photo'  src="Images/rose.jpeg" alt="">
    <img class='photo'  src="Images/White.jpeg" alt="">
    <img class='photo'  src="Images/rose.jpeg" alt="">      
</div>

Answer 1

Chrome 在这个特定的方面有点落后 - 不知道为什么，真的。

如 caniuse 所示, Chrome 需要所有动画相关属性的 -webkit- 前缀，以及 @-webkit-keyframes。

添加这些，应该一切正常。不得不为 Chrome 复制所有内容有点烦人，但是哦，好吧......