0

Estoy animando un elemento con la libreria animate.css, mi pregunta es:

¿Cual es la forma mas sencilla (preferentemente sin usar javascript o jquery) de volver a animar un elemento pasado "x" segundos de que termino la primera animación?

Por ejemplo la primera animación es:

<h1 class="animate__animated animate__fadeIn">Hola mundo!</h1>

Me gustaría que 5 segundos después, ese mismo h1 ejecutara la animación "animate__flash"

Espero me puedan ayudar.

1 respuesta 1

0

Por lo visto, no es posible hacerlo directamente desde HTML, con las clases predefinidas de animate.css. Tendrías que crear una nueva clase para confeccionar tu propia animación compuesta, y en tu hoja de estilo introducir la secuencia de animaciones que te interese.

Por aquí te dejo un ejemplo:

.miAnimacion {
  -webkit-animation-name: fadeIn, flash;
  animation-name: fadeIn, flash;
  
  -webkit-animation-delay: 0s, 5s;  /* fadeIn se ejecuta inmediatamente, flash con un retraso de 5 segundos */
  animation-delay: 0s, 5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<h1 class="animate__animated miAnimacion">Hola mundo!</h1>

Como ves, en animation-name he concatenado las dos animaciones que te interesan, en el orden que las quieres. Después he añadido un animation-delay (retraso en la animación), de 0 segundos para el fadeIn, y de 5 segundos para el flash. Puedes hacer lo mismo con otras propiedades, como animation-duration, por ejemplo. ;)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.