animation-duration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen

La propiedad CSS animation-duration indica la cantidad de tiempo que la animación tarda en completar un ciclo (duración).

El valor por defecto es 0s, que indica que la animación no debe producirse.

Es conveniente usar la propiedad abreviada animation para ajustar todas las propiedades de animación a la vez

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

Sintaxis

Gramatica formal: animation-duration = 
  <time [0s,∞]>#  



animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms

Valores

<time>: El tiempo que tarda la animación en terminar su secuencia. Podemos especificarlo en segundos (usando s) o milisegundos (usando ms). Si no especificamos la unidad, la sentencia no será válida.

Nota: No acepta valores negativos, si los ponemos la sentencia se ignorará. Algunas implementaciones antiguas (con prefijos) pueden considerar los valores negativos como si fueran 0s.

Ejemplos

Visitar CSS animations para ver algunos ejemplos.

Especificaciones

Specification
CSS Animations Level 1 # animation-duration

Compatibilidad con navegadores

BCD tables only load in the browser