Da quando esiste internet, le animazioni degli elementi sulle pagine web sono sempre state gestite da script creati in Flash o Javascript.
Ora che i browser stanno evolvendo sempre più è possibile fare animazioni molto più leggere direttamente con vari hacks CSS, i compiti di noi programmatori sono:
- mantenersi aggiornati per le tecnologie future,
- sviluppare script sempre più leggeri.
Oggi, dunque, vorrei introdurre la gestione delle animazioni tramite la proprietà transition di CSS3.
Premessa per i browser
Nel momento in cui scrivo la proprietà transition è supportata da tutti i browser più utilizzati tranne Firefox e Internet Explorer. Oggi accennerò anche alla proprietà animation che però, attualmente, è supportata solo da Chrome e Safari.
Firefox 4, in uscita nei prossimi mesi supporterà la proprietà transition, ma non la proprietà animation, mentre per Internet Explorer 9 non ci sono ancora specifiche chiare, anche se sappiamo cosa aspettarci…
Chiaramente, consiglio di continuare a leggere questo post con Chrome o Safari, così da poter visualizzare in modo corretto le animazioni che andremo ad analizzare.
La prima animazione
Voglio creare una navbar speciale per il mio prossimo sito internet. Mhhh, vediamo…. Cosa mi viene in mente… Ah, ecco!
Decido di creare qualcosa di “un po’ tamarro”: applicare al menu un’animazione per lo stato hover.
Guardiamo insieme l’esempio funzionante scegliendo la scheda “Result”.
[iframe src=”//jsfiddle.net/hgyDk/1/embedded/”]
Analizzando il codice HTML non notiamo nulla di particolare, mentre se esploriamo la tab “CSS“, troviamo un frammento più interessante.
Il primo blocco che analizziamo è il seguente:
[css]
nav.example-1 a{
-webkit-transition-property: margin-top, border-color, padding, -webkit-border-radius, color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-property: margin-top, border-color, padding, border-radius, color;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
[/css]
La prima regola che troviamo è -webkit-transition-property che serve per definire quali proprietà CSS verranno manipolate durante la transizione. Allo stesso modo -duration e -timing-function servono per definire la durata e la tipologia di curva della transizione.
E per avviare l’animazione?
[css]
nav.example-1 a:hover{
margin-top:5px;
border-color:#77ffbb;
color:#77ffbb;
-webkit-border-radius:10px;
border-radius:10px;
text-shadow:1px 1px 2px #77bbFF;
}
[/css]
Definendo le proprietà che vogliamo applicare allo stato hover, il browser le associa direttamente alla transition impostata.
La proprietà animation
Css3 ci mette a disposizione la proprietà animation per la gestione di semplici animazioni per le quali è possibile impostare gli step intermedi.
[iframe http://jsfiddle.net/NarH3/embedded/]
Anche in questo caso si tratta di poche e semplici regole CSS che però possono essere molto utili.
[css]
nav.example-2 a:hover{
-webkit-animation:’example2Animation’ 1s infinite;
}
[/css]
La regola -webkit-animation definisce quale keyframe, definito nel CSS, utilizzare, la durata, in secondi e il tipo di periodo (in questo caso infinito).
Per creare il keyframe, ovvero la definizione delle transizioni dell’animazione:
[css]
@-webkit-keyframes ‘example2Animation'{
0% {
margin-top:0;
}
25% {
margin-top:20px;
}
50% {
margin-top:0px;
}
75% {
margin-top:-20px;
}
100% {
margin-top:0;
}
}
[/css]
Il keyframe definito non fa altro che impostare, per alcuni step dell’animazione, indicati in percentuale, le regole che devono cambiare in modo sequenziale.
Bello!
La nostra fantasia può lasciarci immaginare tutte le possibili combinazioni con le quali utilizzare queste utili regole CSS3. Chiaramente, utilizzandole dobbiamo sentirci portati ad offrire la corretta funzionalità anche per i browser che non supportano ancora queste regole; questo non significa offrire la stessa identica visualizzazione (anche perchè bisognerebbe mettere mano al javascript per un abbellimento), ma per lo meno prevedere un comportamento analogo seppur senza il plus delle transizioni.
Teniamo a mente per il futuro che queste proprietà CSS richiedono minor sforzo al browser, in termini di prestazioni, rispetto ad pesanti sprite di immagini o animazioni javascript (o addirittura Flash).
