Is there a way to slow down the background change and stop it from shaking too fast? If so, please help me with this.
HTML
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>Enhancing Your <br />Ways</h2>
<p>A free platform for scheduling</p>
</div>
</section>
CSS (Animation Delays not working)
<!--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;
}