CSS Problema con foglio di stile css

[Ildebrando]

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

 

[Stefano Novelli]

Spoiler

Non vorrei essere pedante ma cerchiamo di usare il tag CODE altrimenti col cappero che qualcuno si mette a riformattarlo!

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).

Allora ti confermo che gira anche su Safari, quindi probabilmente la funzione gira su Webkit e su Bink (che è un fork di Webkit).
Dovresti poter risolvere forzando la lettura dei vari engine così:

-webkit-animation: slides_animation 20s infinite;
  -moz-animation:    slides_animation 20s infinite;
  -o-animation:      slides_animation 20s infinite;
  animation:         slides_animation 20s infinite;

Dove ovviamente richiami solo animation.

Purtroppo per il secondo problema non so che dirti, solitamente vado direttamente in jQuery quando devo fare animazioni di qualunque genere, è già cross platform e bastano un paio di righe di codice

 

[Vasilij]

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

Guarda, non lo controllo ma penso di poterti rispondere e darti qualche consiglio.

Precisiamo che hai varie limitazioni se vuoi fare la slide con CSS ad esempio non potrai ottenere l'effetto di dissolvenza, in questo modo almeno.

Penso che i flash ci siano perché ogni volta deve caricare le immagini, quindi è meglio che carichi le immagini subito nell'elemento, tutte insieme.

In questo modo:

#headline {

    background-image: url(../img/slide1.jpg), url(../img/slide2.jpg), url(../img/slide3.jpg), url(../img/slide4.jpg), url(../img/slide5.jpg);

}

adesso nelle keyframes non ti resta che cambiare la grandezza (non testato, se hai problemi prova con la posizione).

background-size: cover, 0 0, 0 0, 0 0, 0 0;
background-size: 0 0, cover, 0 0, 0 0, 0 0;
background-size: 0 0, 0 0, cover, 0 0, 0 0;

e cosi via, . Per i vendor e co. questo tool è utile https://autoprefixer.github.io.