0

Estoy utilizando la librería de animatecss para dar animación a mi sitio web, lo que necesito hacer es aplicar la animación bounce infinita pero que tenga un delay de .2s.

Para ello ocupe las clases que vienen para que la animacion sea infinita use inifinite y para hacer el delay use delay-2s pero solo al hacer la primera animacion se cumple el delay de 2 segundos, osea quiero decir que el delay no aplica para la animacion infinita.

<i class="material-icons animated infinite bounce delay-2s">mi_icono</i>

¿Como se debe hacer?

4
  • 1
    puedes colocar tu codigo de lo que has hecho hasta ahora , el css y el html
    – andy gibbs
    Commented el 16 ago. 2018 a las 14:04
  • No sé como trabaja internamente la librería animatecss, pero si trabaja con keyframes y delay-2s se traduce en la propiedad css animation-delay: 2s, el delay solo se aplica al principio de la animación (en el primer loop por decirlo de alguna manera) Commented el 16 ago. 2018 a las 14:09
  • @andygibbs coloque la linea de código que tengo y a la cual quiero animar
    – vicasas
    Commented el 16 ago. 2018 a las 14:32
  • @JoseHermosillaRodrigo si me pasa exactamente eso, solo en el primer loop funciona el delay. Gracias de todas formas.
    – vicasas
    Commented el 16 ago. 2018 a las 14:32

1 respuesta 1

2

Una de las cosas que puedes hacer es descargar el CSS de animate y editar el código para agregar unos frames que no hagan nada al inicio, ésta podría ser una solución sin usar Jquery.

Ahora, puedes también usar jquery y cada cierto tiempo activar y desactivar la clase 'animated' usando toggleClass();. Aquí está el ejemplo del código.

function re_animate() {
   $('.bounce').toggleClass('animated');
}
window.setInterval(re_animate, 2000);

Puedes agregar también una clase dummy o cambiarlo por un ID. Aquí tienes un fiddle para que te hagas una idea.

Avísame qué tal te funciona eso!

Tu Respuesta

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

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