为什么 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

#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;
  -webkit-animation:round 16s infinite;
  opacity:0;
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 
@-webkit-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;}

Answer 2

Chrome 使用不同的语法：

@-webkit-keyframes
-webkit-animation
-webkit-animation-delay

Answer 3

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

如 caniuse 所示，Chrome 需要所有与动画相关的属性以及 @-webkit-keyframes.

前缀 -webkit-

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

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

Why is firefox showing me the slideshow, but chrome isn't?

html

css

firefox

google-chrome