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 =animation-duration: 6s animation-duration: 120ms animation-duration: 1s, 15s animation-duration: 10s, 30s, 230ms
<time [0s,∞]>#
Valores
<time>
-
El tiempo que tarda la animación en terminar su secuencia. Podemos especificarlo en segundos (usando
s
) o milisegundos (usandoms
). 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