Come creare un semplice sfondo animato con i CSS3

La proprietà animation dei CSS3 permette di creare animazioni efficaci senza l'uso di JavaScript o dell'ormai obsoleto Flash. Abbiamo voluto provare anche noi a lavorare con questa proprietà con l'intento di creare un semplice sfondo animato con un effetto tipo parallax orizzontale.
Anche se in rete si trovano già diversi esempi al riguardo, questo è quello che noi abbiamo ottenuto:

DEMO

Ma vediamo passo passo il procedimento seguito:
1. Abbiamo scelto le immagini da sovrapporre, in formato .png, cercando tra le innumerevoli risorse gratuite che fornisce Pixabay.
Questa è l'immagine che abbiamo usato in primo piano:

Questa l'immagine inserita come secondo livello:

I lati sinistro e destro delle due immagini sono stati modificati in modo da renderli contigui, così che le immagini possano essere ripetute in orizzontale senza che vengano visualizzati stacchi.
Ed infine questa immagine, posta come terzo livello, che rappresenta delle stelle stilizzate:

2. Abbiamo definito il codice HTML per posizionare le tre immagini come immagini di sfondo di tre diversi div inseriti all'interno di un div contenitore:

<div id="parallax-hor">
  <div id="sky3"></div>
  <div id="sky2"></div>
  <div id="sky1"></div>
</div>

Con i CSS abbiamo posizionato in modo assoluto i tre div in modo che le relative immagini di sfondo, ripetute in orizzontale, si sovrappongano una sopra l'altra.
Ecco il risultato parziale ottenuto: STEP 1

3. Occupiamoci ora dell'animazione del colore di sfondo del div contenitore:

#parallax-hor {
  animation: sfondocol 20s linear infinite alternate;
}
@keyframes sfondocol {
  from {
    background-color: #f1aa32;
  }
  to {
    background-color: #003300;
  }
}

Nel codice utilizzato la proprietà animation è la scrittura contratta delle seguenti proprietà/valore:

• animation-name: sfondocol; /* nome dell'animazione, che può essere scelto a piacere */
• animation-duration: 20s; /* tempo in secondi in cui deve avvenire l'animazione */
• animation-iteration-count: infinite; /* numero di volte per le quali l'animazione deve essere ripetuta */
• animation-timing-function: linear; /* andamento della velocità nell'animazione */
• animation-direction: alternate; /* direzione dell'animazione */

Esistono altre proprietà utilizzabili, ad esempio animation-delay con cui si può applicare  all'animazione un ritardo, che, se non dichiarate nella sintassi abbreviata, assumono il valore di default.

L'animazione (nel nostro caso sfondocol) è definita dalla regola @keyframes che contiene le proprietà CSS da animare, nel nostro caso il colore di sfondo che passa dal valore iniziale definito in from al valore finale definito in to. In alternativa a from e to si possono usare le percentuali per indicare i vari step dell'animazione.
Ecco il risultato parziale ottenuto: STEP 2

4. Infine diamo movimento alle tre immagini di sfondo:

#sky1 {
  animation: moto 40s linear infinite;
}
#sky2 {
  animation: moto 60s linear infinite;
}
#sky3 {
  animation: moto 180s linear infinite;
}
@keyframes moto {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2560px 0;
  }
}

L'animazione cambia la posizione delle tre immagini di sfondo dal valore iniziale (0 0) al valore finale (2560px 0).
Il valore di 2560 non è casuale ma deve essere un multiplo della larghezza delle immagini per evitare di visualizzare lo scatto nel momento in cui l'immagine torna alla sua posizione iniziale.
Le tre animazioni si differenziano solo nella durata, ottenendo così movimenti a velocità diverse simulando l'effetto parallasse.

Per assicurare una maggiore compatibilità con i vari browser/dispositivi è opportuno utilizzare anche i prefissi proprietari per la proprietà animation e la regola @keyframes

QUI potete scaricare il CSS completo.