我正在尝试创建一个非常简单的幻灯片,在每个图像之间交叉淡入淡出。问题是图像在下一张图像开始淡入之前淡出。
我希望每个图像淡入 1 秒,再保持 10 秒,然后淡出 1 秒 - 总共 12 秒。
@keyframes 是通过将动画持续时间除以 100 来计算的,即每秒 1.81%。
动画延迟为 11 秒,这引起了我的困惑,因为下一张图像应该随着最后一张图像淡出而淡入。
如果有人能阐明我做错了什么,那么我将不胜感激。
HTML:
<!doctype html>
<html>
<body>
<main>
<div id="cf">
<img src="https://placeimg.com/640/480/animals">
<img src="https://placeimg.com/640/480/nature">
<img src="https://placeimg.com/640/480/tech">
<img src="https://placeimg.com/640/480/people">
<img src="https://placeimg.com/640/480/sepia">
</div>
</main>
</body>
</html>
CSS:
@keyframes crossFade{
0%{opacity: 0;}
1.81%{opacity: 1;}
18.18%{opacity: 1;}
19.98%{opacity: 0;}
100%{opacity: 0;}
}
#cf img{
position:absolute;
left:0;
opacity: 0;
animation-name: crossFade;
animation-duration: 55s;
animation-iteration-count: infinite;
}
#cf img:nth-last-of-type(1){
animation-delay: 0s;
}
#cf img:nth-last-of-type(2){
animation-delay: 11s;
}
#cf img:nth-last-of-type(3){
animation-delay: 22s;
}
#cf img:nth-last-of-type(4){
animation-delay: 33s;
}
#cf img:nth-last-of-type(5){
animation-delay: 44s;
}
Codepen 链接: https ://codepen.io/Musicky/pen/YgyOPm