Domanda css

[ghisirds]

Ciao a tutti,
in un restyling di un sito web che sto seguendo, visibile qui http://goo.gl/cbIFNP , sto provando a creare uno slide di immagini con immagini di sfondo caricate direttamente dal css.

Il codice css dello slide è questo:

#headline {
 padding: 0.8em;
 color: white;
 font-family: 'Exo 2', sans-serif;
 background-color: #FFF;
 background-size: cover;
 background-position: center;
 background-image: url(../img/slide1.jpg);
 animation: slides_animation 20s infinite;
}

@keyframes slides_animation {
  0%  {
 background-image: url(../img/slide1.jpg);
  }
  25%  {
 background-image: url(../img/slide2.jpg);
  }
  50%  {
 background-image: url(../img/slide3.jpg);
  }
  75%  { 
 background-image: url(../img/slide4.jpg);
  }
  100% {  
 background-image: url(../img/slide5.jpg);
  }
}

Vi sono alcuni problemi però che non riesco a risolvere e che vorrei porgere alla vostra attenzione.

Intanto va solo su chrome anche se inserisco i vendor (mentre gli effetti più in basso, nelle immagini dei servizi, vanno con tutti i browser anche senza vendor).

Se lo guardate quindi con chrome, vedete che fra un'immagine l'altra vi è come un flash, almeno al primo giro, dopodichè si stabilizza.

Terzo punto, quando finisce l'ultima slide, e riparte dalla prima, non da effetto di dissolvenza fra le due.
Qualcuno sa come aggiustare questi punti?

Grazie