Propiedad de retraso de animación CSS
Ejemplo
Inicie la animación después de 2 segundos:
div {
animation-delay: 2s;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La animation-delay
propiedad especifica un retraso para el inicio de una animación.
El valor del retraso de la animación se define en segundos (s) o milisegundos (ms).
Valor por defecto: | 0s |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.animationDelay="1s" |
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-delay | 43.0 4.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-delay: time|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Uso de valores negativos. Aquí, la animación comenzará como si ya se hubiera estado reproduciendo durante 2 segundos:
div {
animation-delay: -2s;
}
páginas relacionadas
Tutorial CSS: Animaciones CSS
Referencia HTML DOM: propiedad animationDelay