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

如果你需要减慢动画的速度，那么需要修改的属性就是动画的持续时间，而不是动画延迟。将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; }只是在动画开始第一次迭代之前添加一个时间延迟，但它并没有真正减慢速度。

我真的没有动摇，所以需要看一下你的代码演示才能提供解决方案。您可能希望查看预加载所有背景图像以防止它导致问题。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

CSS3动画太快，背景图像有点抖动

1 个答案: