La transition-durationproprietà, normalmente utilizzata come parte della transitionstenografia, viene utilizzata per definire la durata di una transizione specificata. Cioè, il tempo necessario per la transizione dell'elemento target tra due stati definiti.
.example ( transition-duration: 3s; )Il valore può essere uno dei seguenti:
- Un valore di tempo valido (definito in secondi o millisecondi)
- Un elenco di valori temporali separati da virgole, per la transizione di più proprietà su un singolo elemento
Il valore predefinito per transition-durationè 0s, il che significa che non avrà luogo alcuna transizione e la modifica della proprietà avverrà immediatamente, anche se le altre proprietà relative alla transizione sono definite. Il valore temporale può essere espresso come numero in base decimale per una temporizzazione più precisa e non sono consentiti valori negativi.
Il seguente CodePen mostra un effetto al passaggio del mouse su una casella che utilizza un transition-durationvalore di 1sper modificare gradualmente il colore di sfondo:
Per la compatibilità con tutti i browser supportati, sono richiesti i prefissi del fornitore, con la sintassi standard dichiarata per ultima:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (la prima versione stabile di IE da supportare transition-duration) non richiede il -ms-prefisso.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |