更平滑的背景图像动画（防止闪烁）答案

【问题标题】：Smoother background-images animations (prevent flickering)更平滑的背景图像动画（防止闪烁）
【发布时间】：2018-09-24 15:47:15
【问题描述】：

我想要在三个背景图像之间设置动画。我按照下面的说明进行操作。

但是，我发现有时（首次加载页面时）图像会闪烁。因此，不是平滑过渡，而是图像 1 闪烁然后平滑淡出，然后图像 2 闪烁然后平滑过渡。

如何避免这种闪烁？有没有办法在开始动画之前等待图像完全加载？或者这不是问题？

.page-light {
  background-repeat: no-repeat;
  background-position: center top;
}

@media (max-width: 767.98px) {
  .page-light {
  background-image: url('/img/hero/front-introduction-mobile.png');
  }
}

@media (min-width: 768.00px) {
  .page-light {
    background-image: url('/img/hero/front-introduction-1.png');
    -webkit-animation: animation-home-background 9000ms infinite;
    -moz-animation: animation-home-background 9000ms infinite;
    -o-animation: animation-home-background 9000ms infinite;
    animation: animation-home-background 9000ms infinite;
    -webkit-animation-delay: 1s;
    /* Chrome, Safari, Opera */
    animation-delay: 3s;
  }
}



@-webkit-keyframes animation-home-background {
  0% {
    background-image: url('/img/hero/front-introduction-1.png');
  }
  40% {
    background-image: url('/img/hero/front-introduction-2.png');
  }
  80% {
    background-image: url('/img/hero/front-introduction-3.png');
  }
  100% {
    background-image: url('/img/hero/front-introduction-1.png');
  }
}

@keyframes animation-home-background {
  0% {
    background-image: url('/img/hero/front-introduction-1.png');
  }
  33% {
    background-image: url('/img/hero/front-introduction-2.png');
  }
  66% {
    background-image: url('/img/hero/front-introduction-3.png');
  }
  100% {
    background-image: url('/img/hero/front-introduction-1.png');
  }
}

【问题讨论】：

如果不知道您的HTML 结构，我们将如何提供帮助？
在此处引导内容
你应该考虑this的方法。

标签： html css

【解决方案1】：

正如@vxpin 在 cmets 中指出的那样，我发现这非常有帮助。

https://stackoverflow.com/a/52358326/4262057

基本上你按如下方式预加载所有图像：

.stylename {
  background-image: 
   url('http://www.BungalowSoftware.com/images/silver-background.jpg'),
   url('http://www.BungalowSoftware.com/images/silver-background2.jpg');
}

【讨论】：