slideshow immagini con fade non funziona!

[Dragonfires]

Ciao a tutti
ho un problema...sto cercando di fare uno slideshow con tre immagini con l'effetto fade tra un'immagine e l'altra ma non riesco a farlo funzionare .
Il codice css è questo:

.css-slideshow{   position: relative;
   max-width: 495px;
   height: 370px;
   margin: 5em auto .5em auto;
}
.css-slideshow figure{
   margin: 0;
   position: absolute;
}
.css-slideshow figure{
   opacity:0;
}


@keyframes xfade{
   0%{
      opacity: 1;
   }
   31.33% {
      opacity:1;
   }
   33.33%{
      opacity: 0;
   }
   98% {
      opacity:0;
   }
   100% {
      opacity:1;
   }
}


figure:nth-child(1) {
   animation: xfade 18s 12s infinite;
}
figure:nth-child(2) {
   animation: xfade 18s 6s infinite;
}
figure:nth-child(3) {
   animation: xfade 18s 0s infinite;
}

e questo è il codice HTML:

<div class="css-slideshow">   <figure>
    <img src="../immagini/foto.JPG" width="495" height="370" /> 
  </figure> 
  <figure>  
    <img src="../immagini/foto_1.JPG" width="495" height="370" /> 
  </figure> 
  <figure>  
    <img src="../immagini/foto_2.JPG" width="495" height="370" /> 
  </figure> 
</div>

Mi sapreste aiutare?
Ringrazio anticipatamente