title: Changing background images automatically by using css3
body: <p>I am trying to change background images automatically by using css3. I have 9 images to change in background. The problem I am facing is, it displays only first and last image in sliding but not the 2, 3, 4, 5, 6, 7, 8. I have following code:</p>
  
  <pre><code>&lt;img id="img1" src="images/1.gif"&gt;
  &lt;img id="img2" src="images/2.gif"&gt;
  &lt;img id="img3" src="images/3.gif"&gt;
  &lt;img id="img4" src="images/4.gif"&gt;
  
  &lt;img id="img5" src="images/5.gif"&gt;
  &lt;img id="img6" src="images/6.gif"&gt;
  &lt;img id="img7" src="images/7.gif"&gt;
  &lt;img id="img8" src="images/8.gif"&gt;
  
  &lt;img id="img9" src="images/9.gif"&gt;
  </code></pre>
  
  <p>and here is the CSS:</p>
  
  <pre><code>#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9 {
      width:610px;
      height:610px;
      position:scroll;
      z-index:-1;
      animation-name: test;
      animation-duration: 90s;
      opacity:0;
  }
  #img2 {
  animation-delay:10s;
  -webkit-animation-delay:10s
  }
  #img3 {
      animation-delay:20s;
      -webkit-animation-delay:20s
  }
  #img4 {
      animation-delay:30s;
      -webkit-animation-delay:30s
  }
  
  #img5 {
      animation-delay:40s;
      -webkit-animation-delay:40s
  }
  #img6 {
      animation-delay:50s;
      -webkit-animation-delay:50s
  }
  #img7 {
      animation-delay:60s;
      -webkit-animation-delay:60s
  }
  
  #img8 {
      animation-delay:70s;
      -webkit-animation-delay:70s
  }
  #img9 {
      animation-delay:80s;
      -webkit-animation-delay:80s
  }
  
  @-webkit-keyframes test {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 1;
      }
      100% {
          opacity: 1;
      }
  }
  @keyframes test {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 1;
      }
      100% {
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>The time of delay for each slide from 1 to 8 is 10s except image9, which has delay time 8.60s.</p>
  
  <p>Please help where I am going wrong. :( </p>