您如何调整 CSS 以修复更改背景图像的关键帧引起的闪烁?

How do you adjust CSS to fix flickering from Keyframes changing the background image?

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

到目前为止我已经尝试添加:

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

但是,目前还没有解决闪烁问题。有没有办法只使用 CSS 来解决这个问题?我打赌有一个JS解决方案,但我不知道如何在JS中给它一个关键帧类型的效果。

CSS

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  opacity: 0.8;
  background: url("../../assets/allmight.jpeg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  animation: rotateBg 60s infinite;
  background-size: cover;
}

@keyframes rotateBg {
  0% {
    background: url("../../assets/allmight.jpeg") no-repeat center center fixed;
  }
  10% {
    background: url("../../assets/groupshot.jpeg") no-repeat center center fixed;
  }
  20% {
    background: url("../../assets/battle.jpeg") no-repeat center center fixed;
  }
  30% {
    background: url("../../assets/dekuPunk.png") no-repeat center center fixed;
  }
  40% {
    background: url("../../assets/endeavor.jpeg") no-repeat center center fixed;
  }
  50% {
    background: url("../../assets/group2.jpeg") no-repeat center center fixed;
  }
  60% {
    background: url("../../assets/hug.jpeg") no-repeat center center fixed;
  }
  70% {
    background: url("../../assets/allmightback.jpeg") no-repeat center center
      fixed;
  }
  80% {
    background: url("../../assets/deku.png") no-repeat center center fixed;
  }
  90% {
    background: url("../../assets/allmightRaiseFist.jpeg") no-repeat center
      center fixed;
  }
  100% {
    background: url("../../assets/allmight.jpeg") no-repeat center center fixed;
  }
}

React/JS

import React from "react";
import MainPage from "../MainPage/MainPage";
import "./App.scss";
import { Route, Switch } from "react-router-dom";
import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay";

const App = () => {
  return (
    <>
      <Switch>
        <Route exact path="/" render={() => <MainPage />} />
        <Route path="/:season" component={EpisodeDisplay} />
      </Switch>
    </>
  );
};

export default App;

这很可能是等待下一张图片加载时出现的问题。

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

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;
}

因此当转换发生时,它们将全部加载并准备就绪。