No. 98

Titolo originale: Understanding CSS3 Transitions

Pubblicato in: CSS, Interaction Design

Scritto da Dan Cederholm

E' con grande piacere che presentiamo un estratto dal Capitolo 2 di CSS3 for Web Designers di Dan Cederholm (A Book Apart, 2010). —Ed.

Era il 1997 e sedevo nel mio appartamento fatiscente nella bellissima Allston nel Massachusetts: la tipica nottata a fissare del codice sorgente cercando di insegnare a me stesso l'HTML, al termine di una giornata passata ad impacchettare CD presso un'etichetta discografica locale per una paga misera (da qui l'appartamento fatiscente). Sono sicuro che potete identificarvi.

Una nottata trionfale a dire il vero: alzai il pugno in segno di una dolce vittoria. Avevo appena creato del codice che faceva funzionare il mio primo effetto rollover di immagini in JavaScript. Ve li ricordate?

Mi ricordo ancora lo stupore nel vedere un pulsante grafico creato da me in maniera approssimativa "scambiarsi" con un pulsante diverso quando ci si passava sopra con il mouse. All'epoca avevo a malapena un'idea riguardo a quello che stavo facendo, ma far sì che qualcosa effettivamente cambiasse sulla pagina in maniera dinamica... beh, era semplicemente magico!

È passata molta acqua sotto ai ponti negli ultimi dieci anni per quel che riguarda l'interazione e l'esperienza visuale sul web. Storicamente, tecnologie quali Flash e JavaScript hanno permesso di creare animazioni, movimenti ed effetti interattivi, ma recentemente, con i browser che hanno cominciato a supportare le transizioni e le trasformazioni di CSS, possiamo tranquillamente spostare alcune di quelle animazioni ed arricchimenti della experience nei nostri fogli di stile.

Nel 1997 c'erano volute parecchie notti di grattacapi per il mio primo rollover in JavaScript, molte righe di codice che all'epoca mi sembravano come degli alieni e molte immagini. Oggi CSS3 rende possibili delle interazioni più ricche e molto più flessibili tramite semplici righe di codice che fortunatamente "degradano dolcemente" nei browser che non le supportano ancora.

Possiamo iniziare ad usare le transizioni CSS3 già adesso, a patto di prestare molta attenzione alla scelta delle situazioni nelle quali usarle. Sicuramente, non rimpiazzeranno tecnologie come Flash, JavaScript o SVG (specialmente senza un supporto più vasto da parte dei browser), ma possono essere usate per spingere il livello della experience più in alto. E, cosa ancora più importante, sono relativamente semplici da implementare per i web designer che hanno già una certa familiarità con i CSS: ci vogliono solo poche righe di codice.

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

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?

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

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;
  }
Esempio con link Normal e Hover

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.

Fig. 2: Qui vediamo la transizione scorrevole del background dal verde chiaro al verde scuro.

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)

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

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

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

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

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).

Fig. 3: Gli stati normale e :hover del link.

 
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à

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?

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?

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.

Siate intelligenti, non furbi

Come tutti i nuovi attrezzi luccicanti, è importante utilizzare le transitions in maniera appropriata. Si può perdere la testa aggiungendo le transizioni a qualsiasi cosa ci sia nella pagina, ottenendo il risultato di farla apparire come un mostro pulsante e fastidioso. E' importante decidere dove le transitions effettivamente arricchiscono l'esperienza utente e quando sono solo un rumore estraneo. Inoltre, è cruciale assicurarsi che la velocità della transizione non rallenti un'azione che altrimenti sarebbe rapida ed immediata da parte dell'utente. Usatele con cura e con prudenza.

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Dan Cederholm

Dan Cederholm è un designer, scrittore e speaker che vive a Salem, Massachusetts. È co-fondatore di Dribbble, una community per designers e fondatore di SimpleBits, un piccolo design studio. Sostenitore da molto tempo del web design basato sugli standard, Dan ha lavorato con YouTube, Microsoft, Google, MTV, ESPN e altri. Ha scritto molti libri famosi sul web design e ha ricevuto il TechFellow award all'inizio del 2012. Attualmente è un aspirante suonatore di banjo clawhammer e a volte indossa un cappellino da baseball.