幻灯片动画故障

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 { ... }