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 CSSclass
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
Quale proprietà di transizione consente di specificare l'easing?
transition-duration
transition-cubic-bezier
transition-timing-function
animation-ease
transition-easing
La best practice prevede l'uso di transition-property: all
È possibile eseguire la transizione di tutte le proprietà.