爲什麼這個CSS代碼只能在Chrome中使用？

誰能告訴我爲什麼代碼this page只適用於Chrome？爲什麼這個CSS代碼只能在Chrome中使用？

（我被要求增加一些更多的細節，但我真的不能相信任何...）

似乎在所有的瀏覽器工作，如果我只用背景色，而不是圖像。動畫中是否可能包含圖像？

<!DOCTYPE html> 
<html> 
<head> 
<style> 

div.slideshow 
{ 
width:957px; 
height:310px; 
margin:0; 
padding:0; 
border:0; 
border-collapse:collapse; 
background-image:url('about.jpg'); 
position:relative; 
animation-name:myfirst; 
animation-duration:60s; 
animation-timing-function:cubic-bezier(0.5,0,0.5,1); 
animation-delay:5s; 
animation-iteration-count:infinite; 
animation-direction:normal; 
animation-play-state:running; 

/* Safari and Chrome: */ 
-webkit-animation-name:myfirst; 
-webkit-animation-duration:60s; 
-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1); 
-webkit-animation-delay:5s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-direction:normal; 
-webkit-animation-play-state:running; 
} 

@keyframes myfirst 
{ 
0% {background-image:url('about.jpg');} 
25% {background-image:url('exhibitions.jpg');} 
50% {background-image:url('exhibitions2.jpg');} 
75% {background-image:url('medical.jpg');} 
100% {background-image:url('about.jpg');} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {background-image:url('about.jpg');} 
25% {background-image:url('exhibitions.jpg');} 
50% {background-image:url('exhibitions2.jpg');} 
75% {background-image:url('medical.jpg');} 
100% {background-image:url('about.jpg');} 
} 

</style> 
</head> 
<body> 

<div class="slideshow"></div> 


</body> 
</html>

來源

2013-12-16 Rolf

因爲您只針對webkit瀏覽器。 –

@Bondye非前綴的作品在Firefox和IE –

「（我被要求添加一些細節，但我真的不能想到任何...）」那麼，你的「作品」的定義將有所幫助。我看不到Safari中的網站和Chrome中的網站有什麼區別，所以我不知道你在問什麼。 –

您應該添加moz和o前綴，或者得到無前綴庫，並刪除webkit部分固定前綴。 background-images應該和顏色一樣具有動畫效果，但我可能是錯的。

來源

2013-12-16 14:42:13 Ian

我添加了moz和o前綴，但無濟於事。只有Chrome顯示動畫。 :-( – Rolf

感謝您的全力幫助，我想我幾乎已經解決了這個問題。[這是結果]（http://www.sytemaker.com/development/css-bits/slideshow-c.html）。儘管如此，仍然不會在Opera中顯示... – Rolf

爲什麼這個CSS代碼只能在Chrome中使用？

回答

相關問題