Question

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

它没有在我测试的2个浏览器（Safari和Chrome）上工作，我了解到所有与关键帧相关的属性都需要浏览器前缀，所以我添加了-webkit-但它仍然无法工作< / p>

目的是让图像每隔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

调用动画时出错了。身份#cf3不存在。其余工作正常（但删除-webkit- for opacity，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

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

1 个答案: