CSS3 transition-duration Propiedad

Soporte del navegador

Los números en la tabla indican la primera versión del navegador que soporta la propiedad.

El número que precede a -webkit-, -ms- o -moz- es la primera versión del navegador que soporta la propiedad con ese prefijo.

Definición de propiedad e instrucciones de uso

transition-duration es una propiedad de CSS3 que se utiliza para especificar la duración de un efecto de transición. Define el tiempo que tarda el efecto de transición de principio a fin, lo que puede hacer que el efecto sea más suave y natural.

El valor de esta propiedad puede ser en segundos (s) o milisegundos (ms), e indica la duración del efecto de transición. Se pueden usar valores decimales para definir duraciones más precisas.

Por ejemplo, si quieres que el efecto de transición dure 1 segundo, puedes escribir:

.element {
  transition-duration: 1s;
}

Si quieres que el efecto de transición dure 500 milisegundos, puedes escribir:

.element {
  transition-duration: 500ms;
}

También puedes aplicar varios efectos de transición a un mismo elemento y especificar una duración diferente para cada uno. Esto se logra con valores separados por comas:

.element {
  transition-property: width, height, opacity;
  transition-duration: 0.5s, 1s, 0.3s;
}

Así, el efecto de transición para el cambio de ancho dura 0,5 segundos, el de altura dura 1 segundo, y el de opacidad dura 0,3 segundos.

Al ajustar la propiedad transition-duration, puedes controlar la velocidad y la fluidez de los efectos de transición, creando así interacciones de interfaz de usuario más atractivas.

Sintaxis