title: Crossfade css slide show not working in Internet Explorer 7-8
body: <p>Hello I am using the following CSS for a corss fade slide show but problem is that it is not working inside Iternet Explorer version 7/8 what suggestins to make it work there might have ? I triend Jquery slide show script, it is working but I have a menu over the slide show which the jquery causing it to flicker on the diferent picture fade changes.  </p>
  
  <pre><code>#crossfade &gt; img { 
      width: 100%;
      height: 372px;
      position: absolute;
      top: 0px;
      left: 0px;
      color: transparent;
      opacity: 0;
      z-index: 0;
      -webkit-backface-visibility: hidden;
      -webkit-animation: imageAnimation 30s linear infinite 0s;
      -moz-animation: imageAnimation 30s linear infinite 0s;
      -o-animation: imageAnimation 30s linear infinite 0s;
      -ms-animation: imageAnimation 30s linear infinite 0s;
      animation: imageAnimation 30s linear infinite 0s; 
  }
  
  #crossfade &gt; img:nth-child(2)  {
      -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -o-animation-delay: 6s;
      -ms-animation-delay: 6s;
      animation-delay: 6s; 
  }
  #crossfade &gt; img:nth-child(3) {
      -webkit-animation-delay: 12s;
      -moz-animation-delay: 12s;
      -o-animation-delay: 12s;
      -ms-animation-delay: 12s;
      animation-delay: 12s; 
  }
  #crossfade &gt; img:nth-child(4) {
      -webkit-animation-delay: 18s;
      -moz-animation-delay: 18s;
      -o-animation-delay: 18s;
      -ms-animation-delay: 18s;
      animation-delay: 18s; 
  }
  #crossfade &gt; img:nth-child(5) {
      -webkit-animation-delay: 24s;
      -moz-animation-delay: 24s;
      -o-animation-delay: 24s;
      -ms-animation-delay: 24s;
      animation-delay: 24s; 
  }
  
  @-webkit-keyframes imageAnimation { 
      0% { opacity: 0;
      -webkit-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -webkit-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  @-moz-keyframes imageAnimation { 
      0% { opacity: 0;
      -moz-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -moz-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  @-o-keyframes imageAnimation { 
      0% { opacity: 0;
      -o-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -o-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  @-ms-keyframes imageAnimation { 
      0% { opacity: 0;
      -ms-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -ms-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  @keyframes imageAnimation { 
      0% { opacity: 0;
      animation-timing-function: ease-in; }
      8% { opacity: 1;
           animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  </code></pre>
  
  <p>this is the html </p>
  
  <pre><code>&lt;div id="crossfade"&gt;
  &lt;img src="images/home_background.jpg" /&gt;
  &lt;img src="images/1_background.jpg" /&gt;
  &lt;img src="images/2_background.jpg" /&gt;
  &lt;img src="images/3_background.jpg" /&gt;
  &lt;img src="images/4_background.jpg" /&gt;
  &lt;img src="images/5_background.jpg" /&gt;
    &lt;/div&gt;
  </code></pre>