Html 用于图像库的css渐变

我已经建立了一个图像库。它像幻灯片一样切换到下一张照片。我试图找出如何让图像淡入淡出幻灯片是过渡到下一个图像。我尝试过添加过渡和不透明度，但似乎做不好。谢谢你的帮助

正文{
填充：0；
保证金：0；
}
.滑块框架{
填充：0；
溢出：隐藏；
高度：800px；
宽度：1200px；
左边距：自动；
右边距：自动；
}
@关键帧滑动动画{
0% {
左：0px；
}
10% {
左：0px；
}
20% {
左：1200像素；
}
30% {
左：1200像素；
}
40% {
左：2400像素；
}
50% {
左：2400像素；
}
60% {
左：1200像素；
}
70% {
左：1200像素；
}
80% {
左：0px；
}
90% {
左：0px；
}
100% {
左：0px；
}
}
.幻灯片图像{
宽度：自动；
高度：自动；
边际：0-2400像素；
位置：相对位置；
-webkit动画名称：幻灯片动画；
动画名称：幻灯片动画；
-webkit动画持续时间：33秒；
动画持续时间：33秒；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画方向：交替；
动画方向：交替；
-webkit动画播放状态：正在运行；
动画播放状态：运行；
}
.img集装箱{
高度：800px；
宽度：1200px；
左边距：自动；
右边距：自动；
位置：相对位置；
浮动：左；
}
img{
宽度：100%；
身高：100%；
右边距：自动；
左边距：自动；
填充底部：100px；
填充顶部：100px；
右边填充：100px；
左侧填充：100px；
}

---

要使淡入效果，可以使用以下方法，您可以将其更改为您的代码

fade-in {
    animation: fadeIn ease 20s;
    -webkit-animation: fadeIn ease 20s;
    -moz-animation: fadeIn ease 20s;
    -o-animation: fadeIn ease 20s;
    -ms-animation: fadeIn ease 20s;
    }
    @keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }