Atributo animation-delay CSS

Definición y uso

animation-delay La propiedad define cuándo comienza la animación.

Los valores de animation-delay se miden en segundos o milisegundos.

Consejo:Permite valores negativos, -2s hace que la animación comience inmediatamente, pero salta 2 segundos al comenzar el ciclo de animación.

Vea también:

Tutoriales de CSS3:Animación de CSS

Manual de referencia de HTML DOM:Propiedad animationDelay

Ejemplo

Ejemplo 1

Esperar 2 segundos antes de comenzar la animación:

div {
  animation-delay: 2s;
}

Prueba por tu cuenta

Ejemplo 2

Valores negativos, tenga en cuenta que la animación salta 2 segundos al comenzar el ciclo de animación:

div {
  animation-delay: -2s;
}

Prueba por tu cuenta

Sintaxis de CSS

animation-delay: time;
Valor Descripción Pruebas
time Opcional. Define el tiempo de espera antes de que comience la animación, en segundos o milisegundos. El valor por defecto es 0. Pruebas

Detalles técnicos

Valor por defecto: 0
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.animationDelay="2s"

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit-, -moz- o -o- indican la primera versión que utiliza el prefijo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-