幻燈片動畫故障

Question

我是一個沒有太多CSS經驗的開發者。我想創建一個純粹的CSS3幻燈片使用兩個圖像。我發現some nifty code這樣做，我已經實現了一個非常微小的變化如下（基本上我只是拿出#cf3 id選擇爲img .top）：

.slide { 
    position:absolute; 
} 

@keyframes cf3FadeInOut { 
    0% { 
      opacity:1; 

}   
45% { 
    opacity:1; 

}   
55% {  
    opacity:0; 

}  
100% { 
    opacity:0; 

}  

} 

img.top { 
    animation-name: cf3FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
    animation-direction: alternate; 

} 

第一個圖像定義爲<img class="slideshow top" src="img1.jpg">。第二種是相同的，除非沒有"top"類。

當我加載頁面時，我所有其他的CSS都能正常工作，但無法找到動畫。任何人都能看到我出錯的地方？

Answer 1

您需要添加供應商特定的屬性名稱，CSS3 animation仍然是草稿規範。

-webkit-animation-name: cf3FadeInOut; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-duration: 10s; 
-webkit-animation-direction: alternate; 

-moz-animation-name: cf3FadeInOut; 
-moz-animation-timing-function: ease-in-out; 
-moz-animation-iteration-count: infinite; 
-moz-animation-duration: 10s; 
-moz-animation-direction: alternate; 

-o-animation-name: cf3FadeInOut; 
-o-animation-timing-function: ease-in-out; 
-o-animation-iteration-count: infinite; 
-o-animation-duration: 10s; 
-o-animation-direction: alternate; 

animation-name: cf3FadeInOut; 
animation-timing-function: ease-in-out; 
animation-iteration-count: infinite; 
animation-duration: 10s; 
animation-direction: alternate; 

/* and all the keyframes too */ 
@-webkit-keyframes cf3FadeInOut { ... } 
@-moz-keyframes cf3FadeInOut { ... } 
@-o-keyframes cf3FadeInOut { ... } 
@keyframes cf3FadeInOut { ... }