execute keyframes-animation em clique mais de uma vez - javascript, jquery, css, css3, webkit-animation

Eu tenho um div que tem conteúdo de imagem.Eu quero implementar animação quando eu clico na imagem, mas ele faz apenas com o primeiro clique e o próximo clique na imagem é ineficaz. o que é problema e como posso resolvê-lo?

$(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",
})
})})

e

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

40% {
left: 150px;
}

60% {
left: 75px;
}

100% {
left: 100px;
}}

Respostas:

Você pode redefinir sua animação com um segundo bloco de quadros-chave, conforme sugerido aqui: CSS e jQuery: Como faço para acionar o reposicionamento de um elemento animado em CSS3 de volta para onde estava antes da animação?

Aqui está também uma possível solução sobre como redefinir sua animação quando ela for concluída: Existe um retorno de chamada na conclusão de uma animação CSS3?