Capire le CSS3 Transitions

Una cosa insignificante che condiziona le sorti di una cosa assai più importante#section1

Inizialmente sviluppate solo dal team di WebKit per Safari, le CSS Transitions sono ora una Working Draft del W3C. Costituiscono un buon esempio di un’innovazione portata avanti da un browser che può diventare un potenziale standard. Dico potenziale perché ad oggi è soltanto una bozza. Comunque, Opera ha recentemente aggiunto il supporto per le CSS Transitions nella versione 10.5 e Firefox ha promesso di supportarle nella versione 4.0. In altre parole, mentre rimangono una draft e continuano ad evolversi, sono abbastanza stabili perché Opera e Firefox le considerino seriamente e le supportino. Pertanto, le CSS transitions non sono più esperimenti proprietari solo di Safari.

Vediamo come funzionano le transizioni.

Cosa sono le CSS Transitions?#section2

Mi piace pensare alle CSS transitions come al burro: rendono morbidi i cambiamenti di valore nei vostri fogli di stile quando vengono fatte scattare da interazioni come il passaggio del mouse sopra ad un elemento, i click e il focus. A differenza del vero burro, però, le transizioni non fanno ingrassare: si tratta solo di poche semplici regole da aggiungere al vostro foglio di stile per arricchire alcuni eventi nel vostro design.

Il W3C spiega le CSS transitions in maniera piuttosto semplice:

Le CSS transitions fanno in modo che i cambiamenti di valore nel CSS risultino “morbidi” per la durata specificata. Questo ammorbidimento nel passaggio da un valore ad un altro crea un’animazione CSS quando viene attivato da un click del mouse, nel passaggio a uno stato focus o active o da un qualunque cambiamento dell’elemento (incluso un cambio nell’attributo classe dell’elemento).

Un esempio semplice#section3

Ecco un semplice esempio, nel quale aggiungo una transizione al colore di background di un link, che cambia quando vi si passa sopra con il mouse. Useremo una transition per rendere il cambiamento più morbido, un effetto prima possibile solo con l’uso di Flash o JavaScript, ma ora attuabile con poche semplici righe di CSS.

Il markup consiste in un semplice hyperlink, così:

 
<a href="#" class="foo">Transition me!</a>

Di seguito, aggiungiamo una dichiarazione per lo stato normale del link con un po’ di padding e un background color verde chiaro, seguito da un cambiamento di colore del background verso un verde più scuro al passaggio sopra di esso:

 
a.foo {
  padding: 5px 10px;
  background: #9c3;
  }
a.foo:hover {
  background: #690;
  }

Fig. 1: Lo stato del link: normale e :hover

Ora, aggiungiamo una transizione al cambio di colore del background. Questo renderà più lineare ed animata la differenza lungo un certo intervallo temporale.

Per il momento, useremo solo le proprietà con i prefissi dei produttori che attualmente funzionano nei browser basati su WebKit (Safari e Chrome) così da rendere più semplici le cose. Più tardi aggiungeremo i prefissi dei produttori per Mozilla e Opera.

 
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  }
a.foo:hover {
  background: #690;
  }

Notate le tre parti di una transition nella dichiarazione:

• transition-property: La proprietà su cui deve agire la transition (in questo caso la proprietà background)
• transition-duration: La durata della transition (0.3 secondi)
• transition-timing-function: Quanto deve essere veloce la transition nel tempo (ease)

Funzioni di temporizzazione (ovvero, se solo avessi fatto attenzione alle lezioni di matematica)#section4

Il valore della funzione di temporizzazione permette alla velocità della transizione di cambiare nel tempo definendo una delle sei possibilità: ease, linear, ease-in, ease-out, ease-in-out e cubic-bezier (che vi permette di definire la vostra curva di temporizzazione).

Se dormivate durante le lezioni di geometria al liceo come facevo io, non preoccupatevi. Vi suggerisco di provare semplicemente ciascun valore di queste funzioni di temporizzazione per capire quali siano le differenze tra loro.

Per il nostro semplice esempio, la durata della transition è così rapida (solo 0.3 secondi) che sarebbe difficile determinare le differenze tra le sei opzioni. Per animazioni più lunghe, la funzione di temporizzazione che scegliete diventa un pezzo importante del puzzle, poiché c’è tempo per notare i cambiamenti di velocità sulla lunghezza dell’animazione.

Se avete dei dubbi, ease (che tra l’altro è anche il valore di default) o linear dovrebbero andare bene per transizioni brevi.

Potremmo semplificare in maniera significativa la dichiarazione usando l’abbreviazione della proprietà della transition:

 
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }

Ora abbiamo una regola molto più compatta che porta allo stesso risultato.

Tutto questo meraviglioso effetto di transizione funziona bene nei browser basati su WebKit, ma come si comporta negli altri?

Il supporto nei browser#section5

Come ho accennato prima, le transizioni sono state inizialmente sviluppate dal team WebKit e sono presenti in Safari e Chrome fin dalla versione 3.2, ma Opera le supporta nella versione 10.5 e il supporto è stato promesso da Firefox a partire dalla versione 4.0. Per via di questo supporto presente e futuro, è importante aggiungere gli appropriati prefissi dei produttori così che le transitions funzioneranno in più browser man mano che il supporto verrà esteso.

Creare il transition stack completo#section6

Ecco la dichiarazione rivista con l’aggiunta dei prefissi -moz- e -o- insieme alla effettiva proprietà transition di CSS3. Mettiamo la proprietà senza prefissi per ultima nello stack, per assicurarci che l’implementazione finale avrà la meglio sulle altre man mano che la proprietà cambierà il suo stato da bozza a terminata.

 
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }

Con quello stack, faremo in modo che il cambiamento di colore del background sarà morbido nelle attuali versioni di Safari, Chrome e Opera così come nelle future versioni di qualunque browser decida di supportarla.

Stati della transizione#section7

Mi ricordo di aver provato una certa confusione quando cominciai a giocare con le CSS Transitions. Non avrebbe avuto più senso mettere le proprietà di transizione nella dichiarazione :hover, dal momento che quello dà il via alla transition? La risposta è che ci sono altri possibili stati di un elemento oltre a :hover ed è probabile che vogliate che quella transition accada su ciascuno di quelli senza venir duplicata.

Ad esempio, potreste volere la transizione anche sulle pseudo-classi :focus o :active del link. Invece di dover aggiungere lo stack della proprietà di transition ad ognuna di queste dichiarazioni, le istruzioni di transizione sono attaccate allo stato normale e pertanto dichiarate una sola volta.

L’esempio seguente aggiunge lo stesso cambio di background allo stato :focus. Questo abilita l’attivazione della transizione sia dal passaggio sopra sia dal focus sul link (ad esempio, tramite tastiera).

 
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover,
a.foo:focus {
  background: #690;
  }

Proprietà di transition multiple#section8

Supponiamo di voler cambiare, assieme al colore di background, il colore del testo del link ed applicare anche a questo una transition. Possiamo farlo creando una stringa di transitions, separate da una virgola. Ciascuna può avere durata variabile e diverse funzioni di temporizzazione (fig.3).

 
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background .3s ease,
    color 0.2s linear;
  -moz-transition: background .3s ease,
    color 0.2s linear;
  -o-transition: background .3s ease, color 0.2s linear;
  transition: background .3s ease, color 0.2s linear;
  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }

Applicare la transition a tutte le possibili proprietà#section9

Un’alternativa alla creazione di un elenco di proprietà multiple è l’utilizzo del valore all, che avrà l’effetto di applicare la transition a tutte le proprietà disponibili.

Inseriamo all all’interno del nostro semplice esempio invece di elencare il background ed il colore separatamente. Ora condividono la stessa durata e la stessa funzione di temporizzazione.

 
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }

Si tratta di un modo conveniente per catturare tutti i cambiamenti che accadono sugli eventi :hover, :focus, o :active senza dover elencare ogni proprietà a cui vorreste applicare una transition.

Quali proprietà dei CSS possono avere delle transition?#section10

Adesso che abbiamo applicato con successo le transizioni al background e al colore di un link, ci sono molte altre proprietà CSS che possono avere delle transizioni, ivi incluse width, opacity, posizione e font-size. Una tabella di tutte le possibili proprietà (e dei loro tipi) che possono avere delle transizioni è messa a disposizione dal W3C.

Perché invece non si usa JavaScript?#section11

Probabilmente vi starete chiedendo perché, dal momento che non tutti i browser supportano le CSS transitions, non si usi una soluzione in JavaScript per gestire l’animazione. Da un po’ di tempo i framework popolari come jQuery, Prototype e script.aculo.us rendono possibili le animazioni con JavaScript, con funzionamento cross-browser.

Dipende tutto da quanto sono cruciali le transizioni nella experience. In questo piccolo libro sottolineo come potete adottare la semplicità e la flessibilità di CSS3 se scegliete le parti appropriate della user experience a cui applicarle: arricchendo le interazioni presenti sulla pagina. Abbastanza frequentemente, l’animazione di queste interazioni, quando è gestita tramite le CSS Transition non è parte integrante del brand, della leggibilità o del layout del sito. Pertanto, l’uso di poche semplici righe di CSS per attivare un’animazione semplice supportata nativamente dal browser (piuttosto che scegliere un framework JavaScript) è una scelta intelligente. E una possibilità che sono felice di avere a disposizione.