Propiedad transition-duration

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

Sintaxis

cssselector {
  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.

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;
}

Результат:

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