使用 CSS 关键帧的淡入淡出图像不起作用
Crossfading images with CSS Keyframes not working
我是第一次在 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;
}
您调用动画时出错。 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;
}
我是第一次在 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;
}
您调用动画时出错。 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;
}