CSS3: trasformazioni e animazioni

Un piccolo epserimento su trasformazioni e animazioni in css3, realizzato per essere testato su chrome (gli altri browser non sono stati presi i considerazione).

La prova riguarda la realizzazione di un piccolo acquario dove alcuni pesci possono nuotare…

La grafica è quella che é, photoshop è uno sconosciuto.

Partiamo dall’html:

<div id=”contenitore”>
<div id=”sx”></div>
<div id=”dx”></div>
<div id=”bottom”></div>
<div id=”top”></div>
<div id=”vasca”></div>
<div id=”corallo”><img src=”images/corallo.gif”></div>
<div id=”corallo2″><img src=”images/corallo2.gif”></div>
<div id=”pesce_01″><img src=”images/pesce-arciere.gif”></div>
<div id=”pesce_02″><img src=”images/pesce-arciere2.gif”></div>
<div id=”pesce_03″><img src=”images/pygoplites-diacanthus.gif”></div>
<div id=”pesce_04″><img src=”images/pygoplites-diacanthus2.gif”></div>
<div id=”pesce_05″><img src=”images/cardinale2.gif”></div>
<div id=”pesce_06″><img src=”images/cardinale.gif”></div>
<div id=”pesce_07″><img src=”images/pesci_tropicali_442.gif”></div>
<div id=”pesce_08″><img src=”images/pesci_tropicali_44.gif”></div>
</div>

Abbiamo la vasca dove nuoteranno i pesci, quattro cerotti ai lati per nascondere il fuori scenza, due coralli per farci nuotare i pesci in mezzo e appunto alcuni pesci,

più saranno più sarà difficile cogliere la ripetitività dei gesti.

La prima parte del css è molto tradizionale, sono praticamente tutti div posizionati in mdo assoluto per costruire lo scenario, lavorando quindi al massimo sullo z-index:

html, body{ margin:0; padding:0;}
#contenitore{ width:960px; height:600px; border:1px solid #000; position:absolute; left:50%; margin-left:-480px;}
#sx{ width:178px; height:600px; background-color:#D0F3FB; position:absolute; left:0; z-index:100;}
#dx{ width:178px; height:600px; background-color:#D0F3FB; position:absolute; right:0; z-index:100;}
#bottom{ width:960px; height:98px; background-color:#D0F3FB; position:absolute; bottom:0; z-index:100;}
#top{ width:960px; height:98px; background-color:#D0F3FB; position:absolute; top:0; z-index:100;}
#corallo{ width:300px; height:200px; position:absolute; bottom:100px; left:160px; z-index:100;}
#corallo2{ width:300px; height:200px; position:absolute; bottom:100px; left:400px; z-index:100;}
#vasca{ width:600px; height:400px; margin:100px auto; background-image:url(images/fondo.jpg); box-shadow:5px 5px 5px 5px #666666; border-radius:5px;}

La parte forse più interessante è costituita dai nostri pesci, ne prenderemo uno come esempio gli altri seguono la stessa linea di sviluppo con parametri diversi,

iniziamo a formattare e posizionare fuori dall vasca il nostro pesciolino:

#pesce_01{ width:60px; height:60px; position:absolute; top:270px; right:50px;}

poi impostiamo l’animazione in 5 step intermedi che sarà il risultato di traslazioni, per attraversare la vasca (e uscire dall’altra parte),

rotazioni e scale per far sembrare il movimento più naturale e non solo lineare:

@-webkit-keyframes ‘animazione_pesce_01′{
from{-webkit-transform:translate(0,0);}
20%{-webkit-transform:translate(-140px,-90px) rotate(10deg) scale(1,1.6);}
40%{-webkit-transform:translate(-280px,-70px) rotate(-1deg);}
60%{-webkit-transform:translate(-420px,-105px) rotate(-10deg) scale(1,1.6);}
80%{-webkit-transform:translate(-560px,-65px) scale(1,1.6);}
to{-webkit-transform:translate(-750px,50px);}
}

Ultimo passo usiamo la nostra animazione che abbiamo impostato:

#pesce_01{
-webkit-animation-name:animazione_pesce_01;
-webkit-animation-duration:20s;
-webkit-animation-delay:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
}

dove associamo l’animazione da usare tramite il nome assegnato, la durata in secondi, il “delay” dal caricamento della pagina

il numero di cicli o se la vogliamo infinita e l’effetto accellerazione

Ripetendo questo lavoro per diversi elementi, semplicemente variando i parametri si pò raggiungere questo risulatato