Css3: che carine le animazioni senza Javascript.

Ma lo sapevate che senza Flash e senza codici Javascript, si possono realizzare delle interessanti animazioni sui nostri elementi Html? [a dire il vero oggi in classe ho promesso che l'avrei fatto, poi sono passato a Flash™, mea culpa ]

I vantaggi stanno in un più leggero peso dell’effetto e nel funzionamento indipendentemente dai vari blocchi di sicurezza, gli svantaggi ovviamente nella non perfetta compatibilità tra i browsers (basare la forza di un layout sulle transitions può essere una lama a doppio taglio).

L’utilizzo è facile, si dice quali sono le proprietà dello stile che subiscono l’effetto e si impostano diversamente nel caso di stato Normale ed in quello di Hover, per esempio.

Partiamo da una transition di base su un link

HTML
<a href='http://www.marcotramontano.com'>Link verso un bel blog</a>

CSS
a {
color: #666;
margin-left:0px;
transition-property:color, margin-left; <------ proprietà
transition-duration:1s; <----- parametro opzionale, la durata
}

a:hover {

color:#9C9;

margin-left:10px;

}

Questo è l’effetto

Ovviamente impostate anche i vari -o-, -moz- e -webkit- che “per fortuna” avranno gli stessi nomi ed argomenti (o per Opera, moz per Firefox, webkit per Safari e Chrome)

Se poi vi va di approfondire allora…

.quadrato{
background-color: #CCCCCC;
width: 200px;
height: 100px;
padding:10px;
transition-property: background-color, width, height;
transition-duration: 2s, 1s, 3s;
transition-timing-function: ease-in, linear, ease-out;
transition-delay: 1s, 2s, 1s;
-webkit-transition-property: background-color, width, height;
-webkit-transition-duration: 2s, 1s, 3s;
-webkit-transition-timing-function: ease-in, linear, ease-out;
-webkit-transition-delay: 1s, 2s, 1s;
-o-transition-property: background-color, width, height;
-o-transition-duration: 2s, 1s, 3s;
-o-transition-timing-function: ease-in, linear, ease-out;
-o-transition-delay: 1s, 2s, 1s;
-moz-transition-property: background-color, width, height;
-moz-transition-duration: 2s, 1s, 3s;
-moz-transition-timing-function: ease-in, linear, ease-out;
-moz-transition-delay: 1s, 2s, 1s;
}
.quadrato:hover{
background-color: #99FF99;
width: 100px;
height: 200px;
padding:10px;
}

Ovviamente così è più uno Spaghetti Code che un buon esercizio ma sta sempre a noi capire quando fermarci e come usare le innovazioni.

Ci sono degli esempi online bellissimi, provate a capire quanto jQuery c’è e quanto è solo con i Css3.

Buona lettura e, mi raccomando, condivisione.

AGGIORNAMENTO del 14/12/2011: Ovviamente appena ho tempo parlerò anche delle “animation” in css3, praticamente gli effetti senza rollover

Tweet