Transizioni CSS

Transizioni CSS

CSS transizioni ti permettono di cambiare in modo fluido i valori delle proprietà nel tempo specificato.

Muovi il mouse su questo elemento per vedere l'effetto di transizione CSS:

CSS

In questa sezione, imparerai le seguenti proprietà:

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

Supporto del browser per la transizione

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

proprietà Chrome IE Firefox Safari Opera
transizione 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Come usare CSS transizioni?

Per creare un effetto di transizione, è necessario chiarire due cose:

  • CSS attributo da aggiungere all'effetto
  • Durata dell'effetto

Attenzione:Se non si specifica una parte del tempo, la transizione non avrà alcun effetto perché il valore predefinito è 0.

L'esempio seguente mostra un elemento <div> rosso di 100px * 100px. L'elemento <div> ha anche specificato un effetto di transizione per l'attributo width, che dura 2 secondi:

Esempio

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

Quando il valore dell'attributo CSS specificato (width) cambia, inizia l'effetto di transizione.

Ora, assegniamo un nuovo valore alla proprietà width quando il mouse è sopra l'elemento <div>:

Esempio

div:hover {
  width: 300px;
}

Provatelo personalmente

Attenzione, quando il cursore si allontana dall'elemento, questo torna gradualmente al suo stile originale.

Modificare i valori di alcune proprietà

L'esempio seguente aggiunge un effetto di transizione sia alla proprietà width che a height, width è di 2 secondi e height è di 4 secondi:

Esempio

div {
  transition: larghezza 2s, altezza 4s;
}

Provatelo personalmente

Specificare la curva di velocità della transizione

transition-timing-function L'attributo determina la curva di velocità dell'effetto di transizione.

L'attributo transition-timing-function accetta i seguenti valori:

  • ease - Determina un effetto di transizione che inizia lentamente, accelera poi rallenta (predefinito)
  • lineare - Determina un effetto di transizione con la stessa velocità da inizio a fine
  • ease-in - Determina un effetto di transizione che inizia lentamente
  • ease-out - Determina un effetto di transizione che termina lentamente
  • ease-in-out - Determina un effetto di transizione che inizia e termina più lentamente
  • cubic-bezier(n,n,n,n) - Ti permette di definire i tuoi valori nella funzione di Bezier a tre punti

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

Esempio

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

Provatelo personalmente

Ritardo dell'effetto di transizione

transition-delay La proprietà determina il ritardo dell'effetto di transizione (in secondi).

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

Esempio

div {
  transition-delay: 1s;
}

Provatelo personalmente

Transizione + trasformazione

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

Esempio

div {
  transition: larghezza 2s, altezza 2s, trasformazione 2s;
}

Provatelo personalmente

Altri esempi di transizione

Puoi specificare ciascuna proprietà di transizione CSS come segue:

Esempio

div {
  transition-property: larghezza;
  transition-duration: 2s;
  transition-timing-function: lineare;
  transition-delay: 1s;
}

Provatelo personalmente

o utilizzare la sintassi abbreviata transizione Proprietà:

Esempio

div {
  transition: larghezza 2s lineare 1s;
}

Provatelo personalmente

Proprietà di transizione CSS

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

proprietà descrizione
transizione Proprietà abbreviate, utilizzate per impostare una singola proprietà per quattro proprietà di transizione.
transition-delay Definire il ritardo dell'effetto di transizione (in secondi).
transition-duration Definire per quanto tempo o millisecondi deve durare l'effetto di transizione.
transition-property Definire il nome dell'attributo CSS per cui viene applicato l'effetto di transizione.
transition-timing-function Definire la curva di velocità dell'effetto di transizione.