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

[KillerWorm]

Ciao, è possibile che il tuo browser non supporti "animation".

Versioni precedenti ad IE10 non lo supportano affatto. Per versioni meno recenti di altri browser è necessario utilizzare le relative specifiche -webkit-, -moz- e -o-.

Vedi qui: http://www.w3schools.com/css/css3_animations.asp

[Dragonfires]

Grandissimo KillerWorm, adesso funziona
Non ci avevo pensato alla compatibilità del browser...d'ora in poi farò più attenzione.
Grazie ancora

[KillerWorm]

Figurati
Aggiungo, se vuoi un sistema più compatibile, e probabilmente più versatile, potresti optare per una soluzione JavaScript/jQuery.
Nel caso basta fare qualche ricerca sul web, tipo "fade images jquery" o qualcosa del genere.

[Dragonfires]

Si ho visto che ne esistono di vari tipi ma per adesso rimango sul css xD
Grazie ancora KillerWorm