Background Animato

Le animazioni con i CSS3, oltre ad essere piuttosto potenti, sono anche abbastanza semplici da implementare.

La sintassi base delle animazioni con CSS3 prevede l’uso della regola @-webkit-keyframes per la prima definizione in questo esempio.

@-webkit-keyframes animazionebg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
    }
 
@keyframes animazionebg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

Aggiungiamo tramite css le immagini da animare

#nuvole { 
    width: 560px; 
    height: 480px; 
    background-image: url(nuvole.jpg);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    -webkit-animation: animazionebg 40s linear infinite; /* Safari and Chrome */
    animation: animazionebg 40s linear infinite;
}
#villaggio  { 
    width: 560px; 
    height: 480px; 
    background-image: url(villaggio.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    -webkit-animation: animazionebg 10s linear infinite; /* Safari and Chrome */
    animation: animazionebg 10s linear infinite;
}

Il body conterrà due contenitori uno per le nuvole e uno per il villaggio.

<div id="nuvole">
    <div id="villaggio"></div>
</div>

Scarica il codice completo

Animazione Flip In CSS3

https://developer.mozilla.org/en-US/docs/Archive/CSS3