Javascript 如何调整CSS以修复改变背景图像的关键帧的闪烁？

我有11张图片，我想作为我的应用程序背景，并定期更改。我非常喜欢关键帧效果，因为它们通过淡入淡出从一个过渡到另一个。但是，当图像发生变化时，会出现闪烁

到目前为止，我已尝试添加：

-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;

然而，到目前为止，这并没有解决闪烁问题。有没有办法只用CSS来解决这个问题？我打赌有一个JS解决方案，但我不知道如何在JS中给它一个关键帧类型的效果

CSS

html，正文{
身高：100%；
保证金：0；
溢出：隐藏；
}
身体{
不透明度：0.8；
背景：url（“../../assets/allmay.jpeg”）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
动画：旋转60秒无限；
背景尺寸：封面；
}
@关键帧旋转{
0% {
背景：url（“../../assets/allmay.jpeg”）无重复中心固定；
}
10% {
背景：url（“../../assets/groupshot.jpeg”）无重复中心固定；
}
20% {
背景：url（“../../assets/battle.jpeg”）无重复中心已修复；
}
30% {
背景：url（“../../assets/dekuPunk.png”）无重复中心固定；
}
40% {
背景：url（“../../assets/edward.jpeg”）无重复中心固定；
}
50% {
背景：url（“../../assets/group2.jpeg”）无重复中心固定；
}
60% {
背景：url（“../../assets/hug.jpeg”）无重复中心固定；
}
70% {
背景：url（“../../assets/allmightback.jpeg”）无重复中心
固定的；
}
80% {
背景：url（“../../assets/deku.png”）无重复中心固定；
}
90% {
背景：url（“../../assets/allmightRaiseFist.jpeg”）无重复中心
中心固定；
}
100% {
背景：url（“../../assets/allmay.jpeg”）无重复中心固定；
}
}

这很可能是等待下一个映像加载时出现的问题

一个技巧是在原始规则中添加所有背景（使用多个背景）

---

因此，当转换发生时，它们都将加载并准备就绪。

这很可能是等待下一个图像加载时出现的问题

一个技巧是在原始规则中添加所有背景（使用多个背景）

因此，当转换发生时，它们都将加载并准备就绪

body {
  opacity: 0.8;
  background: 
    url("../../assets/allmight.jpeg") no-repeat center center fixed,
    url("../../assets/groupshot.jpeg"),
    url("../../assets/battle.jpeg"),
    url("../../assets/dekuPunk.png"),
    url("../../assets/endeavor.jpeg"),
    url("../../assets/group2.jpeg"),
    url("../../assets/hug.jpeg"),
    url("../../assets/allmightback.jpeg"),
    url("../../assets/deku.png"),
    url("../../assets/allmightRaiseFist.jpeg"),
    url("../../assets/allmight.jpeg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  animation: rotateBg 60s infinite;
  background-size: cover;
}