ejecutar fotogramas clave-animación al hacer clic más de una vez

i have a div that it have image content .i wanna implement animation when i click in image but it do only with first click and next click in image is Ineffective.what is problem and how can i solve it?

$(function () {
         $('div.c').bind('mousedown', function () {
             var $elem = $(this);
             $elem.stop(true)
             .css({ "-webkit-animation-name": "xi",
             "-webkit-animation-duration": "3s",
             "-webkit-animation-timing-function": "ease", 
             "-webkit-animation-delay": "1s",            
              })
              })})

y

     @-webkit-keyframes xi{ 0% {
  left: 100px;
}

40% {
  left: 150px;
}

60% {
  left: 75px;
}

100% {
  left: 100px;
}}

preguntado el 01 de julio de 12 a las 05:07

i think when keyframe reach to 100 percent do not reset with next click because when i refresh the page i can implement animation again. -

I'd suggest adding that to the op ^ -

1 Respuestas

You could reset your animation with a second keyframe block as suggested here: Css y jQuery: ¿Cómo puedo activar el reposicionamiento de un elemento animado CSS3 a donde estaba antes de la animación?

Here's also a possible solution on how to reset your animation when it's completed: ¿Hay una devolución de llamada al completar una animación CSS3?

contestado el 23 de mayo de 17 a las 12:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.