Transizioni in CSS

Le transizioni CSS permettono di cambiare in modo fluido i valori delle proprietà, con una durata specifica.

Ecco una lista delle proprietà legate alle transizioni:

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

Come creare una Transizione

Per creare un effetto di transizione, devi specificare due cose:

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

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

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

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

div:hover {
  width: 300px;
}

Nota che quando il cursore esce dall’elemento, esso tornerà gradualmente al suo stile originale.

Cambia re più Proprietà

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

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

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, poi fine lento (predefinito)
• linear - specifica un effetto di transizione con la stessa velocità dall’inizio alla fine
• ease-in - specifica un effetto di transizione con un inizio lento
• ease-out - specifica un effetto di transizione con una fine lenta
• ease-in-out - specifica un effetto di transizione con un inizio e una fine lenti
• cubic-bezier(n,n,n,n) - ti permette di definire i tuoi valori in una funzione cubic-bezier

h1 {
  transition-timing-function: linear;
}
h2 {
  transition-timing-function: ease;
}
h3 {
  transition-timing-function: ease-in;
}
h4 {
  transition-timing-function: ease-out;
}
h5 {
  transition-timing-function: ease-in-out;
}

Ritardare l’Effetto della 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’inizio:

div {
  transition-delay: 1s;
}

Transizione + Trasformazione

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

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

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;
}

oppure usando la proprietà abbreviata transition:

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