背景动画期间白色闪烁

Question

大家好，这是我第一次来，所以我想欢迎大家。我的背景图片有问题。我尝试编写负责在后台显示多张照片的动画。不幸的是，当您从一张照片跳转到另一张照片时，会有白色闪烁。如何解决？我尝试设置“边框样式：无；”但无济于事。

那是我的CSS代码：

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
}

html{
  scroll-behavior: smooth;
  font-size: 10px;
}
.background{
  width: 100%;
  height: 100vh;
  border-style: none;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: animacja1 150s linear infinite 0s;
  animation-timing-function: ease-in-out;
  background-image: url(../images/2.jpg);
}

@keyframes animacja1 {
  0%{
    background-image: url(../images/1.jpg);
  }12.5%{
    background-image: url(../images/2.jpg);
  }25%{
    background-image: url(../images/3.jpg);
  }37.5%{
    background-image: url(../images/4.jpg);
  }50%{
    background-image: url(../images/5.jpg);
  }62.5%{
    background-image: url(../images/6.jpg);
  }75%{
    background-image: url(../images/7.jpg);
  }87.5%{
    background-image: url(../images/8.jpg);
  }100%{
}
}