html - CSS3 动画太快，背景图像有点晃动

Question

执行后，背景变化太快，而且有点晃动。帮助我减慢这个背景变化并停止背景抖动。

HTML

<!-- Banner -->
<section id="banner">
    <div class="inner">
        <h2>Enhancing Your <br />Ways</h2>
        <p>A free platform for schedualing</p>
    </div>
</section>

CSS(动画延迟不起作用)

<!--The animation-delays not working--> 
@keyframes changebackground {
  0% {
    background-image: url("../Images/4.jpg");
    animation-delay:5s;
  }
  25% {
    background-image: url("../Images/1.jpg") ;
    animation-delay:5s;
  }
  50% {
    background-image: url("../Images/2.jpg") ;
    animation-delay:5s;
  }
  100% {
    background-image: url("../Images/3.jpg");
    animation-delay:5s;
  }
}

#banner {
  margin-top:2.9em;
  background-image: url("../Images/4.jpg");
  background-position:center;
  background-repeat:no-repeat;
  padding:22em 0em 8em 0em;
  background-size:cover;
  width:100%;
  float:left;
  animation-name:changebackground;
  animation-iteration-count:infinite;
  animation-duration:2s;   
  animation-delay:5s;
}

Answer 1

如果您需要减慢动画速度，则需要修改的属性是动画的持续时间而不是动画延迟。将 animation-duration 设置为更高的值。在代码片段中，我将其设置为 20s，因此从每张图片到下一张图片的更改大约需要 5s。如果您需要每次切换之间有 25s 的时间，则将持续时间设置为 100s。 animation-delay 只是在动画第一次迭代开始之前添加了一个时间延迟，但它并没有真正减慢速度。

我真的没有看到动摇，因此需要查看您的代码演示才能提供解决方案。您可能想看看预加载所有背景图像以阻止它引起问题。

@keyframes changebackground {
  0% {
    background-image: url("http://lorempixel.com/200/200/nature/4");
  }
  25% {
    background-image: url("http://lorempixel.com/200/200/nature/1");
  }
  50% {
    background-image: url("http://lorempixel.com/200/200/nature/2");
  }
  75% {
    background-image: url("http://lorempixel.com/200/200/nature/3");
  }
}
#banner {
  margin-top: 2.9em;
  background-image: url("http://lorempixel.com/200/200/nature/4");
  background-position: center;
  background-repeat: no-repeat;
  padding: 22em 0em 8em 0em;
  background-size: cover;
  width: 100%;
  float: left;
  animation-name: changebackground;
  animation-iteration-count: infinite;
  animation-duration: 20s; /* set this */
  animation-delay: 5s;
}

<section id="banner">
  <div class="inner">
    <h2>Enhancing Your <br />Ways</h2>
    <p>A free platform for schedualing</p>
  </div>
</section>