html - 更流畅的背景图像动画(防止闪烁)

Question

我有三个背景图像，我想在它们之间制作动画。我按照下面的概述进行操作。

但是，我发现有时(首次加载页面时)图像会闪烁。因此，不是平滑过渡，而是图像 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');
  }
}

Answer 1

我发现这非常有用，正如@vxpin 在评论中指出的那样。

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