html - 使用 CSS 关键帧淡入淡出图像不起作用

Question

我第一次在 CSS 中使用关键帧。

它在我测试的 2 个浏览器(Safari 和 Chrome)上不起作用，我了解到所有与关键帧相关的属性都需要浏览器前缀，所以我添加了 -webkit- 但它仍然不起作用

目的是让图像每 10 秒交叉淡入淡出，但我一直只看到 Image2。

这是 div 的代码:

<div id="cf">
<img class="bottom" src="Image1.jpg" width = "300px">
<img class="top" src="Image2.jpg" width = "300px" />
</div>

CSS:

#cf {
position:relative;
width:300px;
margin:0 auto;
}

#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


@keyframes cf3FadeInOut {

0% {
opacity:1;
}

45% {
opacity:1;
}

55% {
opacity:0;
}

100% {
opacity:0;
}
}

@-webkit-keyframes cf3FadeInOut {

0% {
    -webkit-opacity:1;
}

45% {
    -webkit-opacity:1;
}

55% {
    -webkit-opacity:0;
}

100% {
    -webkit-opacity:0;
}

}

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

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

Answer 1

你在调用动画时犯了一个错误。 ID #cf3 不存在。其余的工作正常(但删除 -webkit- 不透明度，css 属性不需要它)

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

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

FIDDLE