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