title: CSS3 animations too fast and background image shaky a little bit
body: <p>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.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Banner --&gt;
  &lt;section id="banner"&gt;
      &lt;div class="inner"&gt;
          &lt;h2&gt;Enhancing Your &lt;br /&gt;Ways&lt;/h2&gt;
          &lt;p&gt;A free platform for schedualing&lt;/p&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS (Animation Delays not working)</strong></p>
  
  <pre><code>&lt;!--The animation-delays not working--&gt; 
  @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;
  }
  </code></pre>