Transizioni

Podcast CSS - 044: Transizioni .

Quando interagisci con un sito web, potresti notare che molti elementi sono contrassegnati da uno stato. Ad esempio, i menu a discesa possono essere in stato aperto o chiuso. I pulsanti potrebbero cambiare colore quando vengono visualizzati o passati il mouse sopra. I modali appaiono e scompaiono.

Per impostazione predefinita, il CSS cambia subito lo stile di questi stati.

Utilizzando le transizioni CSS, è possibile interpolare lo stato iniziale e quello di destinazione dell'elemento. La transizione tra i due migliora l'esperienza utente, fornendo indicazioni visive, supporto e suggerimenti sulla causa e sull'effetto dell'interazione.

Proprietà della transizione

Per utilizzare le transizioni in CSS, puoi usare le varie proprietà della transizione o la proprietà abbreviata transition.

proprietà-di-transizione

La proprietà transition-property specifica gli stili di cui eseguire la transizione.

.my-element {
  transition-property: background-color;
}

transition-property accetta uno o più nomi di proprietà CSS in un elenco separato da virgole.

Se vuoi, puoi utilizzare transition-property: all per indicare che ogni proprietà deve eseguire la transizione.

transition-duration

La proprietà transition-duration viene utilizzata per definire il tempo necessario per il completamento di una transizione.

transition-duration accetta unità di tempo, in secondi (s) o millisecondi (ms), e il valore predefinito è 0s.

transition-timing-function

Utilizza la proprietà transition-timing-function per variare la velocità di una transizione CSS nel corso di transition-duration.

Per impostazione predefinita, il CSS eseguirà la transizione degli elementi a una velocità costante (transition-timing-function: linear). Tuttavia, le transizioni lineari possono sembrare in qualche modo artificiali: nella vita reale, gli oggetti hanno un peso e non possono fermarsi e avviarsi all'istante. Accendere o uscire da una transizione può rendere le tue transizioni più vivaci e naturali.

Il nostro modulo sull'animazione CSS offre un'utile panoramica delle funzioni di temporizzazione.

Puoi utilizzare DevTools per sperimentare diverse funzioni di temporizzazione in tempo reale.

ritardo della transizione

Utilizza la proprietà transition-delay per specificare il momento in cui inizierà una transizione. Se transition-duration non è specificato, le transizioni inizieranno immediatamente perché il valore predefinito è 0s. Questa proprietà accetta un'unità di tempo, ad esempio secondi (s) o millisecondi (ms).

Questa proprietà è utile per le transizioni sfalsate, ottenuta impostando un valore transition-delay più lungo per ogni elemento successivo di un gruppo.

transition-delay è utile anche per il debug. L'impostazione del ritardo su un valore negativo può avviare una transizione più avanti nella sequenza temporale.

abbreviazione: transizione

Come la maggior parte delle proprietà CSS, esiste una versione breve. transition combina transition-property, transition-duration, transition-timing-function e transition-delay.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

Quali elementi non possono essere sottoposti a transizione?

Durante la scrittura di codice CSS, puoi specificare le proprietà che devono avere transizioni animate. Consulta questo elenco MDN di proprietà CSS animabili.

In generale, è possibile eseguire la transizione solo di elementi che possono avere uno "stato intermedio" tra il loro stato iniziale e quello finale. Ad esempio, è impossibile aggiungere transizioni per font-family, perché non è chiaro quale "stato intermedio" tra serif e monospace dovrebbe essere simile a questo. D'altra parte, è possibile aggiungere transizioni per font-size perché la sua unità è una lunghezza interpolabile.

Di seguito sono riportate alcune proprietà comuni di cui puoi eseguire la transizione.

Trasforma

La transizione della proprietà CSS transform viene spesso eseguita perché si tratta di una proprietà con accelerazione GPU che garantisce un'animazione più fluida con un consumo inferiore di batteria. Questa proprietà ti consente di scalare, ruotare, traslare o disallineare arbitrariamente un elemento.

Consulta la sezione sulle trasformazioni nel nostro modulo Funzioni.

Colore

Prima, durante e dopo l'interazione, il colore può essere un ottimo indicatore dello stato. Ad esempio, un pulsante potrebbe cambiare colore se viene passato il mouse sopra. Questa modifica del colore può indicare all'utente che è possibile fare clic sul pulsante.

Le proprietà color, background-color e border-color sono solo alcuni dei punti in cui il colore può la transizione al momento dell'interazione.

Dai un'occhiata al nostro modulo sui colori.

Ombre

Le ombre vengono spesso modificate per indicare un cambiamento di altitudine, ad esempio per indicare il focus dell'utente.

Dai un'occhiata al nostro modulo sulle ombre.

Filtri

filter è una potente proprietà CSS che ti consente di aggiungere all'istante effetti grafici. Il passaggio tra diversi stati filter può generare risultati davvero impressionanti.

Consulta il nostro modulo sui filtri.

Attivatori di transizione

Il CSS deve includere un cambio di stato e un evento che attivi il cambio di stato per l'attivazione delle transizioni CSS. Un esempio tipico di questo trigger è la pseudo-classe :hover. Questa pseudo-classe corrisponde quando l'utente passa il mouse sopra un elemento con il cursore.

Di seguito è riportato un elenco di alcune pseudo-classi ed eventi che possono attivare modifiche di stato nei tuoi elementi.

• :hover: trova se il cursore si trova sopra l'elemento.
• :focus: corrisponde se l'elemento è attivo.
• :focus-within : trova corrispondenze se l'elemento o i suoi discendenti sono specifici.
• :target: trova corrispondenze quando il frammento dell'URL corrente corrisponde all'ID dell'elemento.
• :active: corrisponde a quando l'elemento viene attivato (in genere quando l'elemento il mouse è premuto).
• class cambia da JavaScript: quando il CSS class di un elemento cambia tramite JavaScript, il CSS eseguirà la transizione delle proprietà idonee che sono state modificate.

Transizioni diverse per entrare o uscire

Impostando proprietà transition diverse per il passaggio del mouse o lo stato attivo, puoi creare alcuni effetti interessanti.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

Considerazioni sull'accessibilità

Le transizioni CSS non sono una soluzione adatta a tutti. Per alcune persone, le transizioni e le animazioni possono causare chinetosi o malessere. Per fortuna, il CSS dispone di una funzionalità multimediale chiamata prefers-reduced-motion che rileva se un utente ha indicato una preferenza di minore movimento dal dispositivo.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

Consulta il nostro post del blog prefers-reduced-motion: A volte meno movimento è più per ulteriori informazioni su questa funzionalità multimediale.

Considerazioni sulle prestazioni

Quando lavori con le transizioni CSS, potresti riscontrare problemi di rendimento se aggiungi transizioni per determinate proprietà CSS. Ad esempio, quando le proprietà come width o height cambiano, spostano i contenuti nel resto della pagina. In questo modo il CSS deve calcolare le nuove posizioni per ogni elemento interessato per ogni frame della transizione. Se possibile, consigliamo di utilizzare invece proprietà come transform e opacity.

Consulta la nostra guida sulle animazioni CSS ad alte prestazioni per un approfondimento su questo argomento.

Verifica le tue conoscenze

Verifica le tue conoscenze sulle transizioni