Html 如何不断交替两个图像

我尝试使用CSS或jQuery在两个图像之间不断切换。我所做的工作还可以，但它实际上是把一个图像放在另一个图像的上面，如果我使用的图像是透明的，这会导致问题

部分{
位置：相对位置；
}
第img节{
位置：绝对位置；
宽度：200px；
}
.顶{
动画名称：淡入淡出；
动画迭代次数：无限；
动画持续时间：1s；
动画方向：交替；
}
@关键帧淡入淡出{
0% {
不透明度：1；
}
25% {
不透明度：1；
}
75% {
不透明度：0；
}
100% {
不透明度：0；
}
}

---

要解决透明图像相互重叠的问题，您可以使用当前技术在新图像显示时淡出基础图像。为此，请为其动画添加1秒延迟。试试这个：

部分img{
位置：绝对位置；
宽度：200px；
动画：淡入1秒无限交替；
}
.底部{
动画延迟：1s；
}
@关键帧淡入淡出{
0%{不透明度：1；}
25%{不透明度：1；}
75%{不透明度：0；}
100%{不透明度：0；}
}

谢谢，效果很好。另一方面，我如何使它们不褪色，而只是在没有任何动画的情况下显示。您可以修改关键帧以实现这一点。我在答案上加了一个例子。