Html Css3动画不'；无法在firefox上工作（背景褪色）

我写了改变背景的动画，除了firefox，它还可以在每个浏览器上使用。FF上的背景正在更改，但没有动画效果。我尝试了

@-webkit关键帧

，但没有效果。 这就是代码：

---

背景图像

FF中的淡入淡出动画实际上是禁用的。您必须将单独的

div

s与

背景图像一起使用


*{
框大小：边框框；
}
html{
身高：100%；
}
身体{
最小高度：100%；
保证金：0；
填充：0；
}
.背景{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.background>div{
宽度：100%；
身高：100%；
位置：绝对位置；
背景尺寸：封面；
背景位置：中心；
}
.幻灯片1{
背景图片：url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg);
动画：淡入8秒无限；
}
.幻灯片2{
背景图片：url(https://c4.wallpaperflare.com/wallpaper/246/739/689/digital-digital-art-artwork-illustration-abstract-hd-wallpaper-thumb.jpg);
动画：fade2 8s无限；
}
.幻灯片3{
背景图片：url(https://wallpaperplay.com/walls/full/c/5/3/34778.jpg);
动画：fade3 8s无限；
}
@关键帧淡入淡出{
0% {
不透明度：1
}
33.333% {
不透明度：0
}
66.666% {
不透明度：0
}
100% {
不透明度：1
}
}
@关键帧淡入淡出2{
0% {
不透明度：0
}
33.333% {
不透明度：1
}
66.666% {
不透明度：0
}
100% {
不透明度：0
}
}
@关键帧fade3{
0% {
不透明度：0
}
33.333% {
不透明度：0
}
66.666% {
不透明度：1
}
100% {
不透明度：0
}
}