为什么Firefox向我展示幻灯片，但铬不是？

任何想法为什么这个幻灯片可以在Firefox中工作，但不是在Chrome浏览器？（未在IE中测试过）希望有人能帮助！为什么Firefox向我展示幻灯片，但铬不是？

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>

来源

2015-01-16 maxmijn

Chrome（仍然）使用'-webkit-animation'和'@ -webkit-keyframes'。 –

它的工作！非常感谢你！ – maxmijn

@NiettheDarkAbsol你可以发布解决方案作为答案，以便他可以选择答案？ – Lizz

Chrome是有点落后于这个特殊的 - 不知道为什么，真的。

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

添加这些，它应该都工作正常。这是一种烦人的，必须复制一切只是为了Chrome，但哦...

来源

2015-01-16 16:10:14

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

来源

2015-01-16 16:03:57 Tomato

Chrome使用不同了Syntex：

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

来源

2015-01-16 16:06:50 Vijay

为什么Firefox向我展示幻灯片，但铬不是？

回答

相关问题