Question

I have created a slideshow for my project homepage, but on occasion, the screen simply flashes white and then resumes the slideshow. Could you kindly provide any suggestions? I have been unable to locate a solution on this forum that addresses my issue. I am only utilizing CSS and HTML.

.fade-box {
  height: 100vh;
  width: 100%;
  background-image: url(/images/v-1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: 5s;
  animation-name: animate;
  animation-direction: alternate-reverse;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
  animation-duration: 33s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes animate {
  0% {
    background-image: url(/images/v-2.jpg);
  }
  20% {
    background-image: url(/images/v-3.jpg);
  }
  40% {
    background-image: url(/images/v-4.jpg);
  }
  60% {
    background-image: url(/images/v-5.jpg);
  }
  80% {
    background-image: url(/images/v-6.jpg);
  }
  100% {
    background-image: url(/images/v-7.jpg);
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="style.css" rel="stylesheet" />

    <title>Document</title>
  </head>

  <body>
    <div class="fade-box"></div>
  </body>
</html>

css slideshow image some time flicker and and some time just a blank between slide

LEAVE A COMMENT Hủy