Le transizioni css controllano la velocità con cui si modifica l’aspetto di un elemento quando si verifica un cambiamento di stato come, ad esempio, quando si sovrappone il mouse sull’elemento (definito attraverso la pseudo classe :hover).

Senza le transizioni css il cambiamento di aspetto è immediato e meno gradevole.

Le transizioni css

Le transizioni css

Come funzionano le transizioni css

Le transizioni possono essere create inserendo la proprietà transition in una regola css indicando nell’ordine:

  1. le proprietà interessate dalla transizione
  2. la durata
  3. l’andamento della transizione
  4. il ritardo

L’unico valore obbligatorio però è la durata, espressa in secondi, come mostrato nel seguente esempio.

.box {
  width: 100px;
  height: 100px;
  background-color: #008971;
  margin: 1em 0;
}

.box:hover {
  background-color: #003CAA;
  transition:.5s;
}

Quando il mouse si sovrappone all’elemento box, il colore dello sfondo si modifica progressivamente fino a raggiungere quello indicato nella pseudo classe :hover. Le due regole mostrate nell’esempio rappresentano lo stato iniziale e finale dell’elemento mentre, l’animazione vera e propria (in pratica gli stati intermedi, l’interpolazione) viene eseguita dal browser.

Nell’esempio mostrato, la transizione si verifica solo quando l’elemento passa dallo stato normale a quello indicato nella pseudo classe :hover. Per applicare l’effetto anche in senso inverso è necessario utilizzare la proprietà transition in entrambe le regole.

.box {
  width: 100px;
  height: 100px;
  background-color: #008971;
  margin: 1em 0;
  transition:.5s;
}

.box:hover {
  background-color: #003CAA;
  transition:.5s;
}

Le proprietà a cui applicare la transizione

Si può limitare l’applicazione dell’effetto a una o più proprietà separate da virgole. Nell’esempio, la transizione viene applicata solo alle proprietà width e height.

.box:hover {
  background-color: #9B5C01;
  width: 200px;
  height: 200px;
  transition: width, height .5s;
}

Per applicare la transizione alle sole proprietà width e height si potrebbe riscrivere la regola precedente senza la proprietà background-color, così da applicare la transizione solo alle proprietà che compaiono in entrambe le regole ma con valori diversi.

.box:hover {
  width: 200px;
  height: 200px;
  transition: .5s;
}

Le transizioni css sono applicabili solo alle seguenti proprietà, dette animabili:

  • background-color
  • background-position
  • border-bottom-color
  • border-bottom-width
  • border-left-color
  • border-left-width
  • border-right-color
  • border-right-width
  • border-spacing
  • border-top-color
  • border-top-width
  • bottom
  • clip
  • color
  • font-size
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-width
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • right
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index

In futuro potrebbero essere incluse in questa lista altre proprietà css. Per ulteriori informazioni consultare periodicamente la specifica del W3C CSS Transitions.

La durata della transizione

La durata della transizione può essere espressa in secondi o millisecondi.

.box:hover {
  background-color: #9B5C01;
  width: 200px;
  height: 200px;
  transition: width .5s; /* = 500ms (millisecondi)*/
}

Per specificare una durata diversa per ciascuna proprietà si può indicare una serie di coppie di valori (proprietà durata) separati da virgole.

.box:hover {
  background-color: #9B5C01;
  width: 200px;
  height: 200px;
  transition: width 1s, height .5s; 
}

La transizione del precedente esempio durerà 1 secondo per la larghezza e 0,5 secondi per l’altezza.

L’andamento delle transizioni

L’andamento dell’animazione, costante per impostazione predefinita, può essere modificato mediante alcune parole chiave o con la funzione cubic-bezier(). Le parole chiave utilizzabili sono: easelinear, ease-inease-outease-in-outstep-startstep-end steps().

.box:hover {
  width: 200px;
  transition: width 1s ease-in;
}

Ad esempio, con la parola chiave ease-in la velocità della transizione aumenta nel corso dell’animazione mentre con la parola chiave ease-out l’animazione parte alla massima velocità per rallentare progressivamente verso la fine.

Per visualizzare un’anteprima delle altre opzioni disponibili si può consultare la pagina Easing Functions Cheat Sheet.

Il ritardo della transizione

La transizione può essere ritardata della quantità di tempo indicata come ultimo valore. Nell’esempio la transizione è ritardata di 1 secondo.

.box:hover {
  width: 200px;
  transition: width 1s ease-in 1s;
}

Le altre proprietà per le transizioni css

In alcuni casi può essere preferibile utilizzare le singole proprietà che riguardano le transizioni che sono:

  • transition-property: in cui indicare le proprietà da modificare durante la transizione
  • transition-duration: per la durata della transizione
  • transition-timing-function: specifica l’andamento della transizione
  • transition-delay: imposta il ritardo della transizione

La regola precedente può essere riscritta utilizzando le singole proprietà.

.box:hover {
  width: 200px;
  height: 100px;
	
  /* transition: width .5s ease-in 1s; */
  transition-property:width;
  transition-duration:.5s;
  transition-timing-function: ease-in;
  transition-delay: 1s;
}

Il supporto delle transizioni css da parte dei browser

Le transizioni css sono ampiamente supportate da tutti i browser, anche per i dispositivi mobili:

  • Google Chrome: 4 (dalla versione 26 senza prefisso)
  • Internet Explorer: 10+
  • Mozilla Firefox:4 (dalla versione 16 senza prefisso)
  • Apple Safari: 3.1 (dalla versione 6.1 senza prefisso)
  • Opera: 10.5 (dalla versione 12.1 senza prefisso)

Altre informazioni utili sono disponibili nella pagina Using CSS transitions di MDN.