带淡入的CSS图像滑块

我一直在尝试创建一个简单的图像滑块显示四个网站的图像。我已经成功地创建了幻灯片，但是每个图像之间的转换非常快，我希望有一点淡入效果，以便更平滑。这里有很多问题已经建议使用jQuery，但我正试图使用CSS。我还探索了animate.css，但无法使其工作。感谢给予的任何/所有帮助。谢谢：）

以下是迄今为止的代码：

HTML

换线就行了

动画：幻灯片10s无限；

到

动画：幻灯片20秒无限；

---

这会给你一些过渡时间。

你必须设置“滑块”的

不透明度
和
过渡
，才能获得效果


功能{
}
.滑块{
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
高度：80vh；
转换：所有.2易入易出；
动画：幻灯片10秒无限；
}
.覆盖{
颜色：#fff；
宽度：100%；
高度：80vh；
背景色：rgba（0,0,0,0.5）；
转换：所有.2易入易出；
}
@关键帧滑动{
0%{
不透明度：0；
背景色：红色；
}
20%{
不透明度：1；
背景色：红色；
}
25%{
不透明度：0；
背景色：红色；
}
25.1%{
不透明度：0；
背景颜色：蓝色；
}
45%{
不透明度：1；
背景颜色：蓝色；
}
50%{
不透明度：0；
背景颜色：蓝色；
}
50.01%{
不透明度：0；
背景颜色：黄色；
}
70%{
不透明度：1；
背景颜色：黄色；
}
75%{
不透明度：0；
背景颜色：黄色；
}
75.01%{
不透明度：0；
背景颜色：绿色；
}
95%{
不透明度：1；
背景颜色：绿色；
}
100%{
不透明度：0；
背景颜色：绿色；
}
}
您可以尝试管理动画不透明度，并且没有任何其他创建此滑块的方法将显示和转换

     @keyframes slide {
   0%{
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
   48%{ opacity:0;
   }
   50%{
      opacity:1;
      background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);

   }
   97%{ opacity:1;
   98%{ opacity:0;
    100%{
      opacity:1;
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
}

完美！我试图添加转换，但我做得不对/单独进行。是否可以将过渡颜色更改为黑色和/或仅覆盖下一幅图像以使其更平滑？（我希望我说的有道理：D）是的，这是可能的，但我会使用JavaScript解决方案，您可以轻松增加或减少图像数量以及时间和转换类型。因此，要在CSS关键帧上实现，逻辑将是为.feature和.overlay设置不同的动画时间，例如.feature开始并在3秒内获得不透明度：0，然后.overlay开始于2.5秒，在3秒内获得不透明度：1，依此类推。。。
.feature {
   animation: slide 3s;

}

.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   animation: slide 10s infinite;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
}



@keyframes slide {
   0%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25.1%{
      background-image: url(../resources/feature/Feature2.jpg);
   }

   50%{
      background-image: url(../resources/feature/Feature2.jpg);
   }
   50.01%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75.01%{
      background-image: url(../resources/feature/Feature4.jpg);
   }

   100%{
      background-image: url(../resources/feature/Feature4.jpg);
   }
}

     @keyframes slide {
   0%{
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
   48%{ opacity:0;
   }
   50%{
      opacity:1;
      background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);

   }
   97%{ opacity:1;
   98%{ opacity:0;
    100%{
      opacity:1;
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
}