我正在尝试使用HTML和CSS来交叉淡化两个图像,每个图像显示10秒后。我想要不断重复。
这是我的HTML:
<div id="container">
<img class="bottom" src="1.png">
<img class="top" src="2.png">
</div>
CSS:
#container {
float: right;
height: 246px;
position:relative;
width: 230px;
}
#container img {
height: 246px;
width: 230px;
left:0;
opacity: 0;
position:absolute;
}
#container img.bottom {
opacity: 1;
}
#container img.top {
animation-duration: 0.1s;
animation-name: crossFade;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes crossFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
之前我从未使用过CSS动画,所以我有点困惑。只显示“底部”图像,没有其他任何事情发生。
出了什么问题?
答案 0 :(得分:2)
以下是10s
延迟和1s
动画持续时间的示例。
#container {
float: right;
height: 246px;
position: relative;
width: 230px;
}
#container img {
height: 246px;
width: 230px;
left: 0;
opacity: 0;
position: absolute;
}
#container img.bottom {
opacity: 1;
}
#container img.top {
-webkit-animation: crossFade 11s infinite;
animation: crossFade 11s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="container">
<img class="bottom" src="https://dummyimage.com/200x200/404/fff">
<img class="top" src="https://dummyimage.com/200x200/101/fff">
</div>