Run Keyframes-Animation bei Klick mehr als einmal - Javascript, Jquery, CSS, Css3, Webkit-Animation

Ich habe ein Div, dass es Bildinhalt hat.Ich möchte eine Animation implementieren, wenn ich in ein Bild klicke, aber es ist nur beim ersten Klick und beim nächsten Klick im Bild ineffektiv.

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

und

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

40% {
left: 150px;
}

60% {
left: 75px;
}

100% {
left: 100px;
}}

Antworten:

Sie können Ihre Animation mit einem zweiten Keyframe-Block wie hier vorgeschlagen zurücksetzen: Css und jQuery: Wie löse ich die Neupositionierung eines CSS3-animierten Elements dahin zurück, wo es vor der Animation war?

Hier ist auch eine mögliche Lösung zum Zurücksetzen der Animation, wenn sie abgeschlossen ist: Gibt es einen Rückruf nach Abschluss einer CSS3-Animation?