文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么背景在转换到另一个图像时会闪烁/闪烁？css动画关键帧

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

Stack Overflow用户

提问于 2018-03-11 04:53:23

回答 2查看 1.6K关注 0票数 1

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

keyframe

html

css

css-animations

slideshow

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-03-11 22:03:02

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

票数 3

Stack Overflow用户

发布于 2018-03-11 05:59:21

尝试只改变background-image内的keyframe...The问题，keyframe...The问题是身体默认有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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49216762

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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