run keyframes-animation on click more than once

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);
             .css({ "-webkit-animation-name": "xi",
             "-webkit-animation-duration": "3s",
             "-webkit-animation-timing-function": "ease", 
             "-webkit-animation-delay": "1s",            


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

40% {
  left: 150px;

60% {
  left: 75px;

100% {
  left: 100px;



You could reset your animation with a second keyframe block as suggested here: Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

Here's also a possible solution on how to reset your animation when it's completed: Is there a callback on completion of a CSS3 animation?


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.