爲什麼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向我展示幻燈片，但鉻不是？

回答

相關問題