Podcast su CSS - 044: transizioni
Quando interagisci con un sito web, potresti notare che molti elementi hanno lo state. Ad esempio, gli elenchi a discesa possono essere in stato aperto o chiuso. I pulsanti potrebbero cambiare colore quando lo selezioni o quando passi il mouse sopra. Le modali appaiono e scompaiono.
Per impostazione predefinita, il CSS cambia istantaneamente lo stile di questi stati.
Utilizzando le transizioni CSS, possiamo interpolare lo stato iniziale e quello target dell'elemento. La transizione tra i due sistemi migliora l'esperienza utente fornendo indicazioni visive, supporto e suggerimenti sulla causa e sull'effetto dell'interazione.
Proprietà di transizione
Per utilizzare le transizioni in CSS, puoi ricorrere alle varie proprietà di transizione o alla proprietà abbreviata transition.
proprietà-transizione
La proprietà transition-property specifica gli stili di cui eseguire la transizione.
.my-element {
transition-property: background-color;
}
L'elemento 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 deve essere eseguita la transizione di ogni proprietà.
durata-transizione
La proprietà transition-duration viene utilizzata per definire il tempo necessario per completare una transizione.
transition-duration accetta unità di tempo in secondi (s) o millisecondi (ms) e il valore predefinito è 0s.
funzione-tempo-transizione
Utilizza la proprietà transition-timing-function per variare la velocità della transizione di un CSS nel corso del transition-duration.
Per impostazione predefinita, CSS eseguirà la transizione dei tuoi elementi a una velocità costante (transition-timing-function: linear). Le transizioni lineari possono sembrare un po' artificiali, però: nella vita reale, gli oggetti hanno un peso e non possono fermarsi e iniziare immediatamente. Intervenire all'interno o all'esterno di una transizione può rendere le transizioni più vivaci e naturali.
Il nostro modulo sull'animazione CSS offre una buona panoramica delle funzioni di temporizzazione.
Puoi utilizzare DevTools per sperimentare diverse funzioni di temporizzazione in tempo reale.
ritardo nella transizione
Utilizza la proprietà transition-delay per specificare il momento in cui inizia una transizione. Se transition-duration non è specificato, le transizioni verranno avviate immediatamente perché il valore predefinito è 0s. Questa proprietà accetta un'unità di tempo, ad esempio secondi (s) o millisecondi (ms).
Questa proprietà è utile per transizioni scaglionate, ottenute impostando un valore transition-delay più lungo per ogni elemento successivo di un gruppo.
transition-delay è utile anche per il debug. L'impostazione di un valore negativo per il ritardo può avviare una transizione più avanti nella sequenza temporale.
scorciatoia: transizione
Come per la maggior parte delle proprietà CSS, esiste una versione abbreviata. 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;
}
Cosa può e non può effettuare la transizione?
Quando scrivi CSS, puoi specificare quali proprietà devono avere transizioni animate. Consulta questo elenco MDN di proprietà CSS animabili.
In generale, è possibile eseguire la transizione solo degli elementi che possono avere uno "stato intermedio" tra il proprio stato iniziale e quello finale. Ad esempio, è impossibile aggiungere transizioni per font-family perché non è chiaro quale debba essere lo "stato intermedio" tra serif e monospace. D'altra parte, è possibile aggiungere transizioni per font-size perché la sua unità è una lunghezza interpolata tra loro.
Di seguito sono riportate alcune proprietà comuni che puoi trasferire.
Trasforma
La proprietà CSS transform viene comunemente sottoposta a transizione perché è una proprietà con accelerazione GPU che consente un'animazione più fluida che consuma meno batteria. Questa proprietà consente di ridimensionare, ruotare, traslare o inclinare in modo arbitrario 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, se passi il mouse sopra un pulsante, il colore potrebbe cambiare. Questa modifica di colore può indicare all'utente che il pulsante è cliccabile.
Le proprietà color, background-color e border-color sono solo alcune delle parti in cui è possibile
eseguire la transizione del colore tramite interazione.
Consulta il nostro modulo sui colori.
Ombre
Spesso le ombre vengono spostate per indicare un cambiamento di altitudine, ad esempio lo stato attivo dell'utente.
Consulta il nostro modulo sulle ombre.
Filtri
filter è una potente proprietà CSS che ti consente di aggiungere effetti grafici all'istante. La transizione tra diversi stati filter può produrre risultati piuttosto impressionanti.
Consulta il nostro modulo sui filtri.
Attivatori delle transizioni
Il CSS deve includere una modifica di stato e un evento che attivi tale modifica per l'attivazione delle transizioni CSS. Un esempio tipico di questo trigger è la pseudo-classe :hover. Questa pseudo-classe corrisponde al momento in cui 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: corrisponde se il cursore si trova sopra l'elemento.:focus: corrisponde se l'elemento è attivo.:focus-within: corrisponde se l'elemento o i suoi discendenti sono incentrati.:target: corrisponde quando il frammento dell'URL corrente corrisponde all'ID dell'elemento.:active: corrisponde al momento dell'attivazione dell'elemento (in genere quando viene premuto il mouse sopra).- Modifica
classda JavaScript: quando il CSSclassdi un elemento viene modificato tramite JavaScript, il CSS eseguirà la transizione delle proprietà idonee che sono state modificate.
Transizioni diverse per l'entrata o l'uscita
Impostando proprietà transition diverse al passaggio del mouse o allo stato attivo, è possibile 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 adatte a tutti. Per alcune persone, le transizioni e le animazioni possono causare chinetosi o malessere. Fortunatamente, il CSS dispone di una funzionalità multimediale chiamata prefers-reduced-motion che rileva se un utente ha indicato una preferenza per meno movimento dal proprio 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;
}
}
Per ulteriori informazioni su questa funzionalità multimediale, consulta il nostro post del blog prefers-reduced-motion: A volte meno movimento è, più.
Considerazioni sul rendimento
Quando lavori con le transizioni CSS, potresti riscontrare problemi di prestazioni se aggiungi transizioni per determinate proprietà CSS. Ad esempio, quando proprietà come width o height cambiano, inviano i contenuti al resto della pagina. Questo obbliga CSS a calcolare nuove posizioni per ogni elemento interessato per ogni frame della transizione. Se possibile, consigliamo di utilizzare invece proprietà come transform e opacity.
Per un approfondimento su questo argomento, consulta la nostra guida sulle animazioni CSS ad alte prestazioni.
Verifica la tua comprensione
Verifica le tue conoscenze sulle transizioni
Quale proprietà della transizione consente di specificare l'easing?
transition-durationtransition-easingtransition-cubic-beziertransition-timing-functionanimation-easeLa best practice prevede l'utilizzo di transition-property: all
all può causare problemi di prestazioni e transizioni impreviste.È possibile eseguire la transizione di tutte le proprietà.
font-family.