This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
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 |
| Media | visual |
| Valor calculado | como se especifica |
| Animatable | no |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Sintaxis
Gramatica formal: <time>#
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 (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
| Especificación | Estado | Comentarios |
|---|---|---|
| CSS Animations The definition of 'animation-duration' in that specification. |
Working Draft |
Compatibilidad entre navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 3.0-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 # |
4.0-webkit |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.0-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
Not supported | Not supported | 4.2-webkit |