为什么在转换到另一个图像时背景 flashing/flickering？ css 动画关键帧

Question

背景应该是不同图像的自动幻灯片。但是，当它过渡到下一个图像时，有一个白色 flash/flick。难道我做错了什么？我在 css

中使用关键帧

html,body{
  animation-name: rainbowtext;
  animation-duration: 35s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}


@keyframes rainbowtext{
  0%{
    background-image: url("diet-soda.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
  }
  25%{
    background-image: url("coke.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
  }
  50%{
    background-image: url("diet-soda2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
  }
  75%{
    background-image: url("soda2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
  }
  100%{
    background-image: url("sugar.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
  }
}

Answer 1

尝试仅在关键帧内更改 background-image...问题是主体默认具有 0 高度，而您在关键帧

内应用 height

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

body {
  animation-name: rainbowtext;
  animation-duration: 35s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  background-size: cover;
  background-repeat: no-repeat;
  animation-direction: alternate;
}

@keyframes rainbowtext {
  0% {
    background-image: url("https://lorempixel.com/400/200/sports");
  }
  25% {
    background-image: url("https://lorempixel.com/400/200/sports/1");
  }
  50% {
    background-image: url("https://lorempixel.com/400/200/sports/2");
  }
  75% {
    background-image: url("https://lorempixel.com/400/200/sports/3");
  }
  100% {
    background-image: url("https://lorempixel.com/400/200/sports/4");
  }
}

<body></body>

Answer 2

正如 Temani Afif 所说，您的问题来自服务器的加载时间。

使用前一个关键帧预加载图像，即使它们不可见：

html,body{
  animation-name: rainbowtext;
  animation-duration: 35s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}


@keyframes rainbowtext{
  0%{
    background-image: url("diet-soda.jpg"), url("coke.jpeg");
  }
  25%{
    background-image: url("coke.jpeg"), url("diet-soda2.jpg");
  }
  50%{
    background-image: url("diet-soda2.jpg"), url("soda2.jpg");
  }
  75%{
    background-image: url("soda2.jpg"), url("sugar.jpeg");
  }
  100%{
    background-image: url("sugar.jpeg");
  }
}

为什么在转换到另一个图像时背景 flashing/flickering？ css 动画关键帧

Why is the background flashing/flickering when transitioning to another image? css animation keyframes

html

css

slideshow

keyframe

css-animations