CSS3: come usare le transizioni

Una guida sulle CSS3 transitions, disponibili già oggi sui browser più evoluti.

Leggendo CSS3 for Web Designers di Dan Cederholm ho avuto modo di approfondire alcuni moduli che pur non essendo ancora degli standard possono essere già utilizzati in maniera efficace.

La parte che riguarda le CSS3 transitions è una delle più interessanti, perché consente di creare semplici effetti grafici con poche righe di codice all’interno del foglio di stile. E’ assurdo installare interi framework JavaScript per un banale effetto dissolvenza: adesso è possibile evitarlo, con alcuni compromessi.

A cosa servono le transizioni dei CSS3?

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

Questa è la definizione del W3C: semplice e concisa (strano, vista la fonte!). Consentono di controllare il modo in cui cambiano certe proprietà CSS, gestendo la durata della transizione.

Transizioni CSS in pratica

Il modo più semplice per imparare ad usarle è guardare un esempio:

#test a {
  background: #333;
  color: #fff;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#test a:hover, #test a:focus {
  background: #b00;
}

Questo codice applicato ad un semplice link consente di far sfumare il colore di sfondo al mouseover ed al focus. La proprietà deve essere ancora utilizzata con le stringhe proprietarie di ciascun browser, ma inserire la definizione standard alla fine consente di avere un codice già pronto per quando questa funzionalità diventerà ufficiale.

Sintassi

La forma sintetica, quella che ho utilizzato anche io nell’esempio, è quella più comoda. I valori sono nell’ordine:

1. la proprietà a cui applicare la transizione (all indica che la transizione si applica a tutte: colore, sfondo, ecc.)
2. la durata in secondi della transizione
3. il modo in cui la transizione cambia nel tempo. Per capire le differenze la soluzione migliore è provare i valori possibili, che sono:
   • ease (default)
   • linear
   • ease-in
   • ease-out
   • ease-in-out
   • cubic-bezier (a cui vanno passati quattro valori da 0 a 1, ad esempio cubic-bezier(0,1,1,0))
4. il ritardo espresso in secondi (facoltativo)

E’ possibile anche scomporre l’espressione per applicare la transizione solo a determinate proprietà o assegnare tempi diversi. Ad esempio il codice precedente potrebbe essere scritto:

#test a {
  background: #333;
  color: #fff;
  transition-property: background;
  transition-duration: .3s;
  transition-timing-function: ease;
}
#test a:hover, #test a:focus {
  background: #b00;
}

Non ho ripetuto le stringhe proprietarie per i vari browser, ma credo che il concetto sia chiaro: la maggior parte delle volte comunque troverete utile la formula short-hand precedente unita alla proprietà all.

Compatibilità con i browser esistenti

Comprese le transizioni dei CSS3, resta solo da capire se sia realmente possibile utilizzarle oggi. La risposta è sì, perché portano dei miglioramenti visibili sui browser più evoluti, che comunque non compromettono alcuna funzionalità e rendono più piacevole la navigazione. Meglio non esagerare comunque, non lasciatevi prendere la mano rendendo il vostro sito un incubo animato.

Nel momento in cui scrivo l’articolo, le CSS3 transitions sono supportate dalle ultime versioni di:

• Chrome
• Safari
• Opera

Saranno implementate a breve anche da Firefox 4, la cui data di uscita è prevista per il mese di Marzo.

Lato Microsoft saranno introdotte da Internet Explorer 9: niente da fare per tutti i pc con Windows XP installato, su cui IE9 non sarà disponibile.

Curiosità sulle transizioni del background

Un dettaglio interessante riguarda i cambiamenti dell’immagine di sfondo di un elemento. Se al mouseover volete cambiare il background utilizzando uno sprite CSS ed una transizione, l’immagine non avrà un effetto dissolvenza, ma scivolerà dalla posizione :link a quella :hover (come è logico che sia: nel foglio di stile viene semplicemente cambiata la posizione senza dichiarare una nuova immagine).

Questo può dare luogo ad un effetto indesiderato, ma può essere sfruttato anche a vostro vantaggio usando come immagine di sfondo un gradiente lineare, che al mouseover scivolerà progressivamente verso una tonalità differente.

Risorse utili

• Understanding CSS3 Transitions di Dan Cederholm
• Capire le CSS3 Transitions, traduzione italiana