CODEWITHSUNDEEP
javascripthtmlcssreactjscss-animations
mfaccord
mfaccord

Reputation: 225

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

I have 11 images that I want to be my app background and change periodically. I really enjoy the keyframes effect because of how they transition from one to another by fading in and out. However, there is a flicker when the images change.

So far I've tried adding:

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

However, that hasn't solved the flickering so far. Is there a way to solve this using CSS only? I bet there's a JS solution, but I don't know how to give it a keyframe type effect in 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;

Upvotes: 0

Views: 288

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196177

This is most likely a problem with waiting for the next image to load.

A trick would be to add all background in the original rule (using multiple backgrounds)

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

so they will all load and be ready when the transition occurs.

Upvotes: 2

Related Questions