Transizione - Trucchi CSS | CSS Almanac 2025

La transitionproprietà è una proprietà abbreviata utilizzata per rappresentare fino a quattro proprietà estese correlate alla transizione:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Queste proprietà di transizione consentono agli elementi di modificare i valori per una durata specificata, animando le modifiche alle proprietà, invece di farle accadere immediatamente. Ecco un semplice esempio che esegue la transizione del colore di sfondo di un elemento su: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Quel div impiegherà mezzo secondo quando il mouse è sopra di esso per passare dal rosso al verde. Ecco una dimostrazione dal vivo di tale transizione:

Guarda il Pen Transition Demo di Louis Lazaris (@impressivewebs) su CodePen.

È possibile specificare una proprietà particolare come sopra, oppure utilizzare un valore "all" per fare riferimento alle proprietà di transizione.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

In questo esempio sopra, sia lo sfondo che il padding passeranno, a causa del valore "all" specificato per la transition-propertyparte della stenografia.

È possibile separare i set di valori con virgole per eseguire transizioni diverse su proprietà diverse:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Per la maggior parte, l'ordine dei valori non ha importanza, a meno che non sia specificato un ritardo. Se specifichi un ritardo, devi prima specificare una durata. Il primo valore che il browser riconosce come valore di tempo valido rappresenterà sempre la durata. Qualsiasi valore di tempo valido successivo verrà analizzato come ritardo.

Alcune proprietà non possono essere trasferite perché non sono proprietà animabili. Consulta le specifiche per un elenco completo di quali proprietà sono animabili.

Specificando la transizione sull'elemento stesso, si definisce la transizione che deve avvenire in entrambe le direzioni. Cioè, quando gli stili vengono modificati (ad es. Al passaggio del mouse su), le loro proprietà cambieranno e quando gli stili cambieranno di nuovo (ad es. Ad esempio, le seguenti transizioni demo al passaggio del mouse, ma non al passaggio del mouse disattivato:

Guarda la penna zohgt di Louis Lazaris (@impressivewebs) su CodePen.

Ciò accade perché la transizione è stata spostata nel :hoverselettore di stato e non è presente alcuna transizione corrispondente sul selettore che ha come destinazione l'elemento direttamente senza lo :hoverstato.

Per la compatibilità con tutti i browser supportati, sono richiesti i prefissi del fornitore, con la sintassi standard dichiarata per ultima:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (la prima versione stabile di IE da supportare transition) non richiede il -ms-prefisso.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.