CSS3 animations too fast and background image shaky a little bit - html

Question

After executing this, background changes too fast and also it is a bit shaking. Help me to slow down this background change and stop background to shake.
HTML
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>Enhancing Your <br />Ways</h2>
<p>A free platform for schedualing</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;
}

Answer 1

If you need to slow down the animation then the property that needs to be modified is the animation's duration and not the animation delay. Set the animation-duration to a higher value. In the snippet, I have set it as 20s and so the change from each image to the next will take around 5s. If you need a time of 25s between each switch, then set the duration as 100s. animation-delay just adds a time delay before the start of the animation's first iteration but it doesn't really slow it down.
I don't really see a shake and so would need to see a demo of your code in-order to provide solutions. You may want to have a look at preloading all background images to stop it from causing problems.
#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>