transition-duration

Pruébalo

La propiedad de CSS transition-duration establece el tiempo que debe tardar una animación de transición en completarse. Por defecto, el valor es de 0s, esto quiere decir que no se producirá ninguna animación.

Se puede especificar múltiples duraciones; cada duración va a ser aplicada a la propiedad correspondiente según lo especificado en la propiedad transition-property, que actuará como una lista maestra. Si se especifican menos duraciones en la lista maestra, el agente de usuario repetirá la lista de duraciones. Si hay más duraciones, la lista simplemente se trunca al tamaño correcto. En ambos casos, la declaración CSS sigue siendo válida

Sintaxis

/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

Valores

<time>: El <time> indica la cantidad de tiempo que debe tomar la transición del valor anterior de una propiedad, al nuevo valor. Un tiempo de 0s indica que no ocurrirá ninguna transición, es decir, el cambio entre los dos estados será instantáneo. Un valor negativo para el tiempo hace que la declaración sea inválida.

Sintaxis Formal

transition-duration = 
  <time>#

Ejemplos

transition-duration: 0.5s

transition-duration: 1s

transition-duration: 2s

transition-duration: 4s

Especificaciones

Specification	Status	Comment
CSS Transitions La definición de 'transition-duration' en esta especificación.	Working Draft	Definición Inicial

Valor inicial	`0s`
Applies to	todos los elementos y los pseudoelementos `::before` y `::after`
Heredable	no
Valor calculado	como se especifica
Animation type	discrete

Compatibilidad con Navegadores

BCD tables only load in the browser