html - 幻灯片动画的问题

Question

我是一个没有太多 CSS 经验的开发人员。我想使用两个图像创建一个纯 CSS3 幻灯片。我为此找到了一些漂亮的代码#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 动画仍然是一个草案规范。

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