Le transizioni CSS ti consentono di modificare i valori delle proprietà in modo fluido, per una determinata durata.

In questo articolo impareremo a conoscere le seguenti proprietà:

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

Come utilizzare le transizioni CSS?

Per creare un effetto di transizione, si deve specificare due cose:

• la proprietà CSS a cui vuoi aggiungere un effetto
• la durata dell'effetto

L'esempio seguente mostra un elemento <div> rosso di 100px * 100px. L'elemento <div> ha inoltre specificato un effetto di transizione per la proprietà width, della durata di 2 secondi:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

L'effetto di transizione inizierà quando la proprietà CSS specificata (larghezza) cambia valore.

Ora specifichiamo un nuovo valore per la proprietà larghezza quando un utente passa il mouse sull'elemento <div>:

div:hover {
  width: 300px;
}

Visualizza esempio

Da notare che quando il cursore esce dall'elemento, tornerà gradualmente al suo stile originale.

Modifica diversi valori di proprietà

L'esempio seguente aggiunge un effetto di transizione sia per la proprietà larghezza che per quella altezza, con una durata di 2 secondi per la larghezza e 4 secondi per l'altezza:

div {
  transition: width 2s, height 4s;
}

Visualizza esempio

Specificare la curva di velocità della transizione

La proprietà transition-timing-function specifica la curva di velocità dell'effetto di transizione.

La proprietà transition-timing-function può avere i seguenti valori:

• ease - specifica un effetto di transizione con un inizio lento, poi veloce, quindi termina lentamente (questa è l'impostazione predefinita)
• linear - specifica un effetto di transizione con la stessa velocità dall'inizio alla fine
• ease-in - specifica un effetto di transizione con un avvio lento
• ease-out - specifica un effetto di transizione con una fine lenta
• ease-in-out - specifica un effetto di transizione con inizio e fine lenti
• cubic-bezier(n,n,n,n) - consente di definire dei valori in una funzione cubica-bezier

L'esempio seguente mostra alcune delle diverse curve di velocità che possono essere utilizzate:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Visualizza esempio

Ritardare l'effetto di transizione

La proprietà transition-delay specifica un ritardo (in secondi) per l'effetto di transizione.

L'esempio seguente ha un ritardo di 1 secondo prima dell'avvio:

div {
  transition-delay: 1s;
}

Visualizza esempio

Transition + Transformation

L'esempio seguente aggiunge un effetto di transizione alla trasformazione:

div {
  transition: width 2s, height 2s, transform 2s;
}

Visualizza esempio

Altri esempi di transizione

Le proprietà di transizione CSS possono essere specificate una per una, in questo modo:

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Visualizza esempio

o utilizzando la proprietà abbreviata transition:

div {
  transition: width 2s linear 1s;
}

Visualizza esempio

Proprietà di transizione CSS

La tabella seguente elenca tutte le proprietà di transizione CSS: