Question

任何想法为什么这个幻灯片在Firefox中有效，但在Chrome中没有？（Haven在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重复一切，这很烦人，但是哦......好吧......

Answer 2

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

Chrome使用不同的syntex：

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

为什么firefox会向我展示幻灯片，但是Chrome不是吗？

3 个答案: