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

执行此操作后，背景变化太快，也有点晃动。帮助我减缓这种背景变化，并停止背景动摇。CSS3动画太快，背景图像抖动一点点

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; 
}

来源

2015-11-22 Faiq Chaudary

没有问号发现！ – manetsus

答案是否解决了您的问题？如果是，请考虑将其标记为已接受（单击答案附近的投票按钮下方的空白刻度标记）。这就是堆栈溢出解决问题的方式。如果它没有解决你的问题[编辑]更多的信息到问题中。 – Harry

如果您需要将动画放慢那么需要修改的属性是动画的持续时间而不是动画延迟。将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>

来源

2015-11-22 08:19:51 Harry

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

回答

相关问题