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.

* Some parts of this feature may have varying levels of support.

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 inicial0s
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Valor calculadocomo se especifica
Animation typeNot 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-duration
auto value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Consultar también