Question

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

＆＃13;

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

＆＃13;

<body></body>

＆＃13;

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

转换到另一张图像时，为什么背景会闪烁/闪烁？ css动画关键帧

2 个答案: