Le transizioni in CSS

Le transizioni in CSS permettono di animare gradualmente i cambiamenti di stile su un elemento. Con le transizioni, puoi definire il modo in cui un elemento passa da uno stato all'altro, ad esempio quando cambia colore, posizione, dimensione, opacità, e altro ancora.

In questa lezione, vediamo come funzionano le seguenti proprietà CSS per le transizioni: transition-duration, transition-property, transition-timing-function, transition-delay e transition (abbreviazione).

Ad esempio, prova a passare sopra con il mouse a questo elemento:

La proprietà transition-duration

La proprietà transition-duration definisce la durata della transizione, ossia quanto tempo impiegherà la proprietà specificata a passare dallo stato iniziale a quello finale.

La durata della transizione può essere specificata in s (secondi) o ms (millisecondi). Sono accettati solo valori positivi.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition-duration: 1s;
}
div:hover {
  background-color: orange;
}

Nell'esempio, abbiamo usato la pseudo-classe :hover per fare in modo che, quando l'utente passa sopra al <div> con il mouse, cambi sfondo dell'elemento da giallo ad arancione. Nell'esempio, l'animazione dura un secondo.

Puoi anche scegliere più di una durata (divise dalla virgola) se vengono animati più proprietà CSS insieme attraverso transition-property:

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  opacity: 0.5;
  transition-duration: 1s, 0.5s;
  transition-property: background-color, opacity;
}
div:hover {
  background-color: orange;
  opacity: 1;
}

Nell'esempio, la durata della transizione di background-color dura un secondo, mentre quella di opacity ne dura 0.5. Parleremo di transition-property nel paragrafo successivo.

Nota: il valore predefinito di transition-duration è 0s. Per questo motivo, è necessario specificare sempre un valore perché l'animazione della transizione sia visibile.

La proprietà transition-property

La proprietà transition-property specifica quale proprietà CSS dell'elemento sarà animata durante la transizione.

Ecco i parametri accettati dalla proprietà transition-property:

In questo caso, viene animato soltanto il width:

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition-property: width;
  transition-duration: 0.5s;
}
div:hover {
  background-color: orange;
  width: 200px;
}

La proprietà transition-timing-function

La proprietà transition-timing-function determina la velocità della transizione durante il suo corso. In altre parole, controlla come la transizione accelera o decelera durante l'animazione.

La proprietà transition-timing-function accetta i seguenti valori:

Vediamoli in dettaglio.

I valori ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end

I valori ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end hanno tutti la stessa sintassi. Sono molto facili da utilizzare con la proprietà transition-timing-function.

Ecco come usarli:

.ease {
  transition-timing-function: ease;
}
.linear {
  transition-timing-function: linear;
}
.ease-in {
  transition-timing-function: ease-in;
}
.ease-out {
  transition-timing-function: ease-out;
}
.ease-in-out {
  transition-timing-function: ease-in-out;
}
.step-start {
  transition-timing-function: step-start;
}
.step-end {
  transition-timing-function: step-end;
}

Il valore cubic-bezier()

Il valore cubic-bezier() è una funzione di CSS che permette di creare animazioni di velocità personalizzate per le transizioni, consentendo di personalizzare come una transizione accelera e decelera. Questa funzione richiede quattro valori numerici che definiscono la curva di Bézier (ecco il perché del suo nome).

La sintassi è: cubic-bezier(x1, y1, x2, y2). Vediamo quali sono i parametri:

div {
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

Il valore steps()

La funzione steps() in CSS è usata per creare transizioni a scatti (invece che fluide). Quando usi steps(), la transizione viene suddivisa in un numero specifico di passaggi, che sono simili a una serie di fotogrammi.

La sintassi è: steps(numeroDiStep, skip). Il numeroDiStep indica in quanti passaggi deve essere divisa la transizione. Lo skip è facoltativo e indica quale passaggio deve essere tralasciato:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: steps(5);
}
div:hover {
  width: 200px;
}

Nell'esempio, la transizione di width viene divisa in cinque passaggi.

La proprietà transition-delay

La proprietà transition-delay imposta un ritardo prima che la transizione inizi. Puoi specificare il ritardo in secondi (s) o millisecondi (ms). Dopo quel periodo, inizia la transizione.

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: width;
  transition-duration: 1s;
  transition-delay: 1s;
}
div:hover {
  width: 200px;
}

Nell'esempio, la transizione viene ritardata di un secondo.

La proprietà transition

La proprietà transition riunisce tutte le proprietà CSS viste finora e le unisce in un unico valore.

La sintassi è: transition: property duration timing-function delay. Ognuno dei valori corrisponde alle proprietà che abbiamo visto. Nessuno dei valori è obbligatorio; se non inseriti, verrà usato il valore di default.

Ad esempio, ecco il metodo più breve per animare una transizione di 1 secondo:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: 1s;
}
div:hover {
  width: 200px;
}

Ora, invece, animiamo soltanto la transizione di background-color, con un ritardo di 1s:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s ease-in-out 1s;
}
div:hover {
  width: 200px;
  background-color: orange;
}