更平滑的背景图像动画(防止闪烁)

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