使用 CSS 关键帧交叉淡化图像不起作用答案

【问题标题】：Crossfading images with CSS Keyframes not working使用 CSS 关键帧交叉淡化图像不起作用
【发布时间】：2015-10-13 18:24:51
【问题描述】：

我是第一次在 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;
}

【问题讨论】：

标签： html css css-animations keyframe

【解决方案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

【讨论】：