Effetti di transizione con i CSS3

Negli ultimi anni le pagine web si sono riempite di effetti di transizione sugli oggetti realizzati con l’ausilio di Javascript. Mi riferisco ad effetti come il cambiamento del colore di sfondo di un contenitore al passaggio del mouse come quello che possiamo vedere in questo esempio.

La nuova specifica dei CSS (http://www.w3.org/TR/css3-transitions/) include un modulo, chiamato CSS Transitions,  che ci consente di realizzare questi effetti utilizzando solo il foglio di stile, senza aver bisogno di script esterni.

Il modulo consente di modificare i valori di proprietà CSS specificando la durata dell’effetto di transizione.

Normalmente, quando il valore di una proprietà CSS cambia, il risultato viene renderizzato istantaneamente e l’elemento a cui è assegnata tale proprietà viene aggiornato immediatamente. Un "rudimentale" esempio di transizione che abbiamo utilizzato finora è il seguente:

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
}
  div:hover {
    background-color: #ff5c00;
}

Vediamo dunque all’opera il secondo esempio, passando il mouse sul div colorato.

Utilizzando le transizioni, invece, è possibile assegnare una durata (espressa in secondi) per il passaggio dal vecchio valore al nuovo.

Possiamo applicare un semplice effetto di transizione di 2 secondi all’esempio precedente aggiungendo queste due semplici righe di codice CSS:

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
  transition-property: background-color;
  transition-duration: 2s;
}
  div:hover {
    background-color: #ff5c00;
}

Le due proprietà attivano il cambiamento del colore di sfondo dal colore di partenza (contenuto nella prima regola) al colore finale (contenuto nella regola con l’hover).

La transizione dell’esempio è evidenziata in Figura 1:

Supporto dei browser

Un esempio pratico dell’effetto di transizione non è stato dato in precedenza perchè bisogna prima fare una precisazione sul supporto attuale dei browser per questo modulo.

Le transizioni, nella loro definizione standard prevista dalla specifica, non sono supportate nativamente da nessun browser. Ognuno però, Internet Explorer escluso, fornisce la sua alternativa proprietaria che consente di incominciare ad utilizzare tali proprietà.

Le versioni minime dei browser necessarie per sfruttarle sono le seguenti:

• Firefox 3.7 (disponibile in versione alpha)
• Google Chrome 4.0+
• Safari 3.1+
• Opera 10.5+

Possiamo ora riprendere l’esempio con la transizione e adattarlo ad ogni browser. Il codice CSS diviene, quindi, il seguente:

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
  transition-property: background-color; /*standard*/
  transition-duration: 2s;
  -webkit-transition-property: background-color; /*safari*/
  -webkit-transition-duration: 2s;
  -o-transition-property: background-color;      /*opera*/
  -o-transition-duration: 2s;
  -moz-transition-property: background-color;    /*firefox*/
  -moz-transition-duration: 2s;
}
  div:hover {
    background-color: #ff5c00;
}

Vediamo a questo punto il terzo esempio.

Le proprietà

Per effettuare gli effetti di transizione, la specifica del CSS3 include quattro proprietà:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Vediamo nel dettaglio le funzionalità di ogni proprietà fornendo qualche esempio del loro utilizzo.

Transition-property

transition-property definisce le proprietà a cui verrà assegnata la transizione.

L’elenco delle proprietà a cui è possibile assegnare un’animazione è possibile visualizzarlo nella sezione apposita della specifica, raggiungibile a questo link.

Se tale proprietà è utilizzata senza transition-duration, la transizione avrà effetto immediato. Quindi l’effetto sarebbe lo stesso che si ha senza usarla.

Transition-duration

transition-duration definisce la durata della transizione, ovvero il tempo che la transizione impiegherà per passare dallo stato iniziale a quello finale e viceversa. Il valore è espresso in secondi e di default è settata a 0.

Con le due proprietà viste finora si possono già realizzare effetti davvero molto carini. Riprendiamo a questo punto il primo esempio, quello in cui realizzavamo un effetto di transizione utilizzando Javascript. Vogliamo realizzare lo stesso effetto utilizzando adesso solo codice CSS. Nell’esempio partivamo da un quadrato di dimensione 100x100 e, al verificarsi dell’evento hover, il box assumeva una larghezza pari al 70% della pagina, aumentava il margine da sinistra, la dimensione del bordo e l’opacità. Vediamo il codice di cui abbiamo bisogno.

div {
 width: 100px;
 height: 100px;
 background-color: #98d925;
 border: 2px solid #009F16;
 transition-property: width, opacity, margin-left, border-width;
 transition-duration: 2s;
 -webkit-transition-property: width, opacity, margin-left, border-width;
 -webkit-transition-duration: 2s;
 -o-transition-property: width, opacity, margin-left, border-width;
 -o-transition-duration: 2s;
 -moz-transition-property: width, opacity, margin-left, border-width;
 -moz-transition-duration: 2s;
}
  div:hover {
   width: 70%;
   opacity: 0.4;
   margin-left: 0.6in;
   border-width: 10px;
}

L’effetto è del tutto identico ed è stato realizzato utilizzando semplicemente le due proprietà viste finora. Ecco il quarto esempio, realizzato solo con i CSS.

Transition-delay

transition-delay permette di ritardare l’esecuzione della transizione del numero di secondi passati come parametro.

Riprendiamo l’esempio 3 e aggiungiamo un ritardo di 2 secondi all’inizio della transizione. Il codice da aggiungere è il seguente:

div {
 ...
 transition-delay: 2s;
 -webkit-transition-delay: 2s;
 -o-transition-delay: 2s;
 -moz-transition-delay: 2s;
}

Il nuovo esempio (esempio 5) è disponibile a questo indirizzo.

Transition-timing-function

transition-timing-function descrive come i valori intermedi usati durante la transizione vengono calcolati. Anzich&ecute; utilizzare una ripartizione lineare del tempo è possibile utilizzare delle funzioni che cambiano velocità durante la transizione. Tali effetti vengono identificati con il termine easing e sono basati sulla Curva di Bèzier. 

Le funzioni a disposizione sono le seguenti:

• ease;
• linear;
• ease-in;
• ease-out;
• ease-in-out;
• cubic-bezier con cui è possibile realizzare tutte le funzioni precedenti e realizzare funzioni personalizzate.

Vediamo un semplicissimo esempio del funzionamento di tali funzioni. Realizziamo una transizione sulla dimensione in larghezza di un div. Il codice necessario è il seguente:

div {
 ...
 transition-timing-function: ease;
 -webkit-transition-timing-function: ease;
 -o-transition-timing-function: ease;
 -moz-transition-timing-function: ease;
}

Il risultato è visualizzabile nell’esempio 6.

Le funzioni di transizione messe a confronto possiamo vederle nell’esempio 7.

Combinare le transizioni

Abbiamo visto finora che è possibile assegnare la transizione a più proprietà contemporaneamente ma, tutte terminavano entro lo stesso tempo. È possibile, invece, assegnare una durata e/o un valore di ritardo ad ogni singola proprietà indipendente dalle altre. Vediamo un esempio per capire come:

div {
  transition-property: background-color, width, height;
  transition-duration: 5s, 10s, 2s;
  transition-delay: 0s, 0s, 4s;
}

Dal codice precedente abbiamo visto che è sufficiente separare con una virgola i valori di durata e ritardo per assegnarli alla proprietà corrispondente.

L’effetto è visualizzabile nell’esempio 8.