Propiedad transition-duration

La propiedad transition-duration establece el tiempo de ejecución de una transición suave transition.

Sintaxis

selector {
	transition-duration: tiempo en s o ms;
}

Valores

Valor	Descripción
`s`	Especifica el tiempo en segundos (por ejemplo `3s`). Se pueden especificar valores fraccionarios, por ejemplo, `0.5s` - medio segundo.
`ms`	Especifica el tiempo en milisegundos (por ejemplo `3ms`). Un segundo son `1000` milisegundos.

Valor por defecto: 0s.

Ejemplo

Pase el cursor del ratón sobre el bloque: cambiará suavemente su anchura en 2 segundos.

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

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

Véase también

la propiedad transition-property,
que especifica el nombre de la propiedad para la transición
la propiedad transition-delay,
que especifica el retraso antes de la transición
la propiedad transition-timing-function,
que especifica la función de temporización para la transición
la propiedad transition,
que es la abreviatura para la transición
la propiedad animation,
con la que se puede crear una animación