滑块上的淡入动画不工作（仅限CSS3和html5）

我是CSS3和HTML5的初学者，现在我正在尝试创建一个HTML5和CSS3网站，以便编写PSD模型

当我开始使用滑块时，问题就出现了。通常，它应该是一个带2个图像的转盘滑块，底部有一个进度条和一个动画，以使其在循环中工作

因此，首先我创建了一个主div，其中包含两个包含无线电输入的其他div，这样我可以使下一个和上一个箭头工作，以便从一个幻灯片传递到另一个幻灯片

然后，在我的css文件中，我创建了带有不透明效果的@keyframes来继续淡入淡出动画。不幸的是，这并不像我想的那样有效，只是箭头，而不是淡入淡出动画

有人能帮我看看我的代码吗？我会非常感激的

以下是我的HTML5代码：

@关键帧单击{
0%{不透明度：.4；}
100%{不透明度：1；}
}
@关键帧淡入淡出{
0%{不透明度：1}
45%{不透明度：1}
50%{不透明度：0}
95%{不透明度：0}
100%{不透明度：1}
}
@关键帧淡入淡出2{
0%{不透明度：0}
45%{不透明度：0}
50%{不透明度：1}
95%{不透明度：1}
100%{不透明度：0}
}
#i1，#i2{显示：无；}
.滑块{
宽度：100%；
高度：550px；
保证金：20px自动；
职位：rela
}
#第一，第二{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.以前的{
宽度：35px；
高度：70像素；
位置：绝对位置；
最高：40%；
左：0；
背景色：rgba（70,70,70,0.6）；
边界半径：0px 50px 50px 0px；
}
.下一个{
宽度：35px；
高度：70像素；
位置：绝对位置；
最高：40%；
右：0；
背景色：rgba（70,70,70,0.6）；
边界半径：50px 0px 0px 50px；
}
.prev:悬停，.next:悬停{
过渡：.3s；
背景色：rgba（99,99,99,1）；
}
.fas.fa-V形-左{
位置：绝对位置；
左：0；
最高：30%；
左边距：5px；
颜色：#fff；
字体大小：30px；
}
.fas.fa-chevron-right{
位置：绝对位置；
右：0；
最高：30%；
右边距：5px；
颜色：白色；
字体大小：30px；
}
.slider div#first{
背景：url（'img1.jpg'）没有重复中心；
背景尺寸：封面；
动画：渐弱30000s无限线性；
-webkit动画：渐弱30000s无限线性；
}
.slider div#second{
背景：url（'img2.jpg'）没有重复中心；
背景尺寸：封面；
动画：fade2 30000ms无限线性；
-webkit动画：fade2 30000ms无限线性；
}
.幻灯片{z-索引：-1；}
#i1：选中~#首先，
#i2：选中~#秒
{z-index:10；动画：单击1s缓进缓出；}

网络代理：杜斯万岁
VOS项目！
你有什么计划吗？网络代理你的助手

不幸的是，我不确定是否可以组合：

• 底层的进展
• 侧面的工作按钮
• 自动推进

只是使用CSS/HTML。您需要将您的状态存储为单选按钮，但是如果您使用线性动画前进，如果用户想要返回，将会发生什么？如何同步状态

您可以同时具有“进度”和“工作”按钮。我已经根据您的代码制作了一个示例，说明如何实现这一点，并能够添加2张以上的幻灯片

收音机{
显示：无；
}
.滑块{
宽度：100%；
高度：175px；
位置：绝对位置；
左：0；
排名：0；
}
.滑块{
位置：绝对位置；
宽度：100%；
身高：100%；
不透明度：0；
指针事件：无；
过渡：1s不透明度；
}
.滑块\滑块：第n个类型（1）{
背景：印度红；
}
.滑块\滑块：第n个类型（2）{
背景：玉米丝；
}
.滑块\滑块：第n个类型（3）{
背景：淡绿色；
}
.按钮{
宽度：35px；
高度：70像素；
位置：绝对位置；
最高：40%；
背景色：rgba（70,70,70,0.6）；
}
.按钮--上一个{
左：0；
边界半径：0px 50px 50px 0px；
}
.按钮--下一个{
右：0；
边界半径：50px 0px 0px 50px；
}
.按钮：悬停{
过渡：0.3s；
背景色：rgba（99,99,99,1）；
}
.收音机：第n个类型（1）：选中~.滑块\u滑块：第n个类型（1），
.收音机：第n个类型（2）：选中~.滑块\u滑块：第n个类型（2），
.收音机：第n个类型（3）：选中~.滑块\u滑块：第n个类型（3）{
不透明度：1；
指针事件：自动；
}
.进展{
保证金：0；
填充：0；
位置：绝对位置；
顶部：175px；
左：0；
右：0；
文本对齐：居中；
列表样式类型：无；
}
.进度项目{
位置：相对位置；
显示：内联块；
保证金：1px；
边框：3倍纯黑；
宽度：16px；
高度：16px；
}
.radio:n类型（1）：已选中~.progress.progress\u项目：n类型（1）：之前，
.radio:n类型（2）：已选中~.progress.progress\u项目：n类型（2）：之前，
.radio:n类型（3）：已选中~.progress.progress\u项目：n类型（3）：之前{
位置：绝对位置；
顶部：2个；
右：2px；
底部：2px；
左：2px；
内容：''；
背景：黑色；
}
.fas.fa-V形-左{
位置：绝对位置；
左：0；
最高：30%；
左边距：5px；
颜色：#fff；
字体大小：30px；
}
.fas.fa-chevron-right{
位置：绝对位置；
右：0；
最高：30%；
右边距：5px；
颜色：白色；
字体大小：30px；
}

第一张幻灯片
第一副标题

第二张幻灯片
第二副标题

第三张幻灯片
第三副标题

这很聪明。当您在Hi中加载功能正常的背景图像URL时，它似乎可以正常工作，谢谢您的回答！问题是，我正在制作psd模型，我必须尽可能多地完成它，就像原来的一样。只有两个滑块，我们只能看到底部的滑动条向前移动，没有显示单选按钮。为什么不使用Javascript？哈哈，这实际上是个挑战！否则，我可以做同样的事情，但用幻灯片效果代替淡入效果，但我也做不到