Proprietà transition-duration

La proprietà transition-duration imposta la durata di una transizione fluida transition.

Sintassi

cssselettore {
  transition-duration: tempo in s o ms;
}

Valori

Valore	Descrizione
`s`	Specifica il tempo in secondi (ad esempio `3s`). È possibile specificare valori frazionari, ad esempio, `0.5s` - mezzo secondo.
`ms`	Specifica il tempo in millisecondi (ad esempio `3ms`). Un secondo è `1000` millisecondi.

Valore predefinito: 0s.

Esempio

Passa il mouse sul blocco - cambierà la sua larghezza in modo fluido in 2 secondi.

html<div id="elem"></div>

css#elem {
  transition-duration: 2s;
  transition-property: width;
  border: 1px solid black;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Vedi anche

la proprietà transition-property,
che specifica il nome della proprietà per una transizione fluida
la proprietà transition-delay,
che specifica il ritardo prima di una transizione fluida
la proprietà transition-timing-function,
che specifica la funzione di temporizzazione per una transizione fluida
la proprietà transition,
che è una scorciatoia per una transizione fluida
la proprietà animation,
con cui è possibile creare un'animazione