为什么在转换到另一个图像时背景闪烁/闪烁？ css动画关键帧答案

【问题标题】：Why is the background flashing/flickering when transitioning to another image? css animation keyframes为什么在转换到另一个图像时背景闪烁/闪烁？ css动画关键帧
【发布时间】：2018-08-19 09:11:34
【问题描述】：

背景应该是不同图像的自动幻灯片。但是，当它转换到下一个图像时，会出现白色闪光/轻弹。难道我做错了什么？我在 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%;
  }
}

【问题讨论】：

只是因为图片没有加载所以在第一次迭代时会出现这种情况，然后就会消失

标签： html css css-animations slideshow keyframe

【解决方案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");
  }
}

&lt;body&gt;&lt;/body&gt;

【讨论】：

height与这里无关，背景会传播到画布上，并且会覆盖整个屏幕，即使body和html的高度都为0……我确定他说的是时间需要从服务器加载图像，所以在等待时他会看到一些白色

【解决方案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");
  }
}

【讨论】：