Question

首先，我要说的是，我知道有人问过这样的问题，而我已经看完了我在google的前几页中没有碰到的所有问题。

问题：

我有一个带有div的登录页面，该div可以扩展屏幕的宽度，并使用CSS过渡在5张不同的图像之间淡入淡出。它们的大小和纵横比都相等，所以我知道这不是问题。图像之间的交叉淡入淡出是平滑的，但是一旦过渡完成，它们就会闪烁，然后开始过渡到下一张图像（再次平滑）。

我已经做了一些尝试来修复它：

保存所有图像以供本地参考
将所有图像调整大小以具有相同的大小和宽高比
在JS中添加了一个简单的图像预加载脚本（在答案中找到）
在两次转换之间留出更多时间以允许一定的加载时间宽容度
按比例缩小所有图像，以防由于文件大小而导致加载缓慢
在Firefox，Opera和Edge中尝试使用相同的问题（具有添加的浏览器特定属性）

我不确定现在该怎么做，但是我知道那里会有更聪明的人，他们可能会提供解决方案，因此，我要感谢那些提供高级建议的人。 >

/*** CSS For .container **/

.container {
  display: flex;
  width: 100% !important;
  padding: 1rem 0;
  margin: 0;
  height: 100vh;
  justify-content: center;
}


/*** CSS For .container-slideshow ***/

.container-slideshow {
  margin-left: 0;
  margin-right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: animSlideshow 28s ease infinite;
}


/*** CSS Animation ***/

@keyframes animSlideshow {
  0% {
    background-image: url('http://lorempixel.com/600/600');
  }
  25% {
    background-image: url('http://lorempixel.com/600/600/sports');
  }
  50% {
    background-image: url('http://lorempixel.com/600/600/city');
  }
  75% {
    background-image: url('http://lorempixel.com/600/600/animals');
  }
  100% {
    background-image: url('http://lorempixel.com/600/600/people');
  }
}

<div class="container white-text container-slideshow">

  <div class="container-content">
    <h1>Welcome to Lorem Impsum,</h1>
    <h3>This is just some sample text.</h3>
  </div>

</div>

它仅在动画中第一次闪烁，因此我猜测它与将背景图像更改为未加载的图片有关。至少在这个示例中对我而言。（如果不是给其他人的话，我会把它作为硬件问题来解决）

以下是我的屏幕快照，以防万一我是唯一看到它的人： Gyazo GIF

Answer 1

根据我可以假设的100％到0％之间的背景，我没有背景，我建议您将初始背景设置为100％，并在此过程中再增加一个步骤，这样就可以开始结束。

类似的东西：

@keyframes animSlideshow {
    0% {
        background-image: url('http://lorempixel.com/600/600');
    }
    20% {
        background-image: url('http://lorempixel.com/600/600/sports');
    }
    40% {
        background-image: url('http://lorempixel.com/600/600/city');
    }
    60% {
        background-image: url('http://lorempixel.com/600/600/animals');
    }
    80% {
        background-image: url('http://lorempixel.com/600/600/people');
    }
    100% {
        background-image: url('http://lorempixel.com/600/600');
    }
}

这样，它从开始处结束，您不会注意到眨眼。

过渡后CSS背景图像闪烁

1 个答案: