Effetto onde con animazioni Css3

Questo tutorial spiega come realizzare una semplice animazione di onde del mare, da utilizzare come sfondo in una pagina web o in uno specifico div.

L'idea di base era di avere delle onde stilizzate come sfondo e di muoverle a righe alterne verso destra o sinistra. Per fare questo abbiamo utilizzato le animazioni Css3 applicate a dei div con un'immagine di sfondo ripetuta. 
Dopo aver creato un'immagine png trasparente, con una semplice onda sinusoidale adatta a ripetersi come sfondo, siamo passati alla scrittura del codice Html. Il quale consiste in un div con un colore di sfondo base che contiene 2 div annidati con id #bg1 e #bg2.

<div class="container">
    <div id="bg1">
        <div id="bg2"></div>
    </div>
</div>

Questi 2 div hanno come sfondo l'immagine dell'onda ripetuta orizzontalmente e verticalmente ma, con l'ausilio della proprietà background-position dei Css, è stato possibile spostare differentemente i background dei 2 div: #bg1 contiene le righe di onde dispari e #bg2 quelle pari che sono sfasate orizzontalmente di 20 pixel rispetto alle prime.

#bg1{
    background: transparent url(./img/wave.png) repeat 0 0;
    background-size: 100px 50px;
}
#bg2{
    background: transparent url(./img/wave.png) repeat -10px 25px;
    background-size: 100px 50px;
}

In questo modo lo sfondo è completo ma statico, ora bisogna animarlo utilizzando i Css3. Abbiamo quindi creato 2 diverse animazioni per i movimenti orizzontali degli sfondi dei 2 div:

@keyframes animationWave1 {
    0% { background-position: 0 0; }
    50% { background-position: -20px 0; }
    100% { background-position: 0 0; }
}
@keyframes animationWave2 {
    0% { background-position: -20px 25px; }
    50% { background-position: 0 25px; }
    100% { background-position: -20px 25px; }
} 

Per una maggiore compatibilità abbiamo ripetuto queste regole anche con le desinenze relative ad ogni tipologia di browser: @-moz-keyframes, @-webkit-keyframes, @-ms-keyframes, @-o-keyframes che vedrete nel codice dell'esempio finale. 
Come ultima operazione vanno assegnate le animazioni create ai rispettivi div.

#bg1{
    background: transparent url(./img/wave.png) repeat 0 0;
    background-size: 100px 50px;
    animation: animationWave1 2s ease-in-out infinite;
}
#bg2{
    background: transparent url(./img/wave.png) repeat -10px 25px;	
    background-size: 100px 50px;
    animation: animationWave2 2s ease-in-out infinite;
}

L'effetto è così completo e potete vederlo in funzione al link seguente:
DEMO 1

Abbiamo creato una seconda demo che utilizza la proprietà di sfondi multipli dei Css3 e che ci permette di avere lo stesso identico effetto risparmiando righe di codice Css e Html.
DEMO 2