Propiedad de duración de animación CSS
Ejemplo
Especifique que la animación debe completar un ciclo en 3 segundos:
div {
animation-duration: 3s;
}
Definición y uso
La animation-duration
propiedad define cuánto tiempo debe tomar una animación para completar un ciclo.
Valor por defecto: | 0 |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.animationDuration="3s" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
animation-duration | 43.0 3.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Sintaxis CSS
animation-duration: time|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
time | Specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial CSS: Animaciones CSS
Referencia HTML DOM: propiedad animationDuration