запустити ключові кадри-анімацію на клацах кілька разів - javascript, jquery, css, css3, webkit-анімація

У мене є розділ, що має вміст зображення.Я хочу реалізувати анімацію, коли я натискаю зображення, але це робиться тільки при першому натисканні, а наступний клік у зображенні неефективний. Яка проблема і як я можу це вирішити?

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

і

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

40% {
left: 150px;
}

60% {
left: 75px;
}

100% {
left: 100px;
}}

Відповіді:

Ви можете скинути свою анімацію за допомогою другого блоку ключових кадрів, як це пропонується тут: Css та jQuery: як я можу викликати переміщення CSS3-анімованого елемента назад до того місця, де воно було до анімації?

Ось також можливе рішення про те, як скинути анімацію, коли вона завершена: Чи є зворотній виклик після завершення анімації CSS3?